@egjs/flicking - npm Package Compare versions

Comparing version 4.0.0-beta.1 to 4.0.0-beta.2

declaration/camera/Camera.d.ts

@@ -48,2 +48,3 @@ import Flicking, { FlickingOptions } from "../Flicking";
     };
+    get atEdge(): boolean;
     get size(): number;
@@ -67,3 +68,4 @@ set offset(val: number);
     updateAnchors(): this;
-    resetNeedPanelHistory(): void;
+    updatePosition(): this;
+    resetNeedPanelHistory(): this;
     protected _resetInternalValues(): void;
@@ -70,0 +72,0 @@ protected _refreshVisiblePanels(): void;

declaration/cfc/withFlickingMethods.d.ts

@@ -1,2 +0,2 @@
-declare const _default: (prototype: any, flickingName: string) => void;
-export default _default;
+declare const withFlickingMethods: (prototype: any, flickingName: string) => void;
+export default withFlickingMethods;

declaration/const/external.d.ts

@@ -0,1 +1,2 @@
+export { CODE as ERROR_CODE } from "./error";
 export declare const EVENTS: {
@@ -10,4 +11,6 @@ readonly READY: "ready";
     readonly MOVE_END: "moveEnd";
-    readonly CHANGE: "change";
-    readonly RESTORE: "restore";
+    readonly WILL_CHANGE: "willChange";
+    readonly CHANGED: "changed";
+    readonly WILL_RESTORE: "willRestore";
+    readonly RESTORED: "restored";
     readonly SELECT: "select";
@@ -14,0 +17,0 @@ readonly NEED_PANEL: "needPanel";

declaration/control/AxesController.d.ts

@@ -19,3 +19,3 @@ import Axes, { OnRelease } from "@egjs/axes";
     constructor();
-    init(flicking: Flicking): void;
+    init(flicking: Flicking): this;
     destroy(): this;
@@ -22,0 +22,0 @@ enable(): this;

declaration/control/Control.d.ts

@@ -5,2 +5,4 @@ import { OnRelease } from "@egjs/axes";
 import AxesController from "./AxesController";
+import { DIRECTION } from "../const/external";
+import { ValueOf } from "../type/internal";
 declare abstract class Control {
@@ -18,3 +20,3 @@ protected _flicking: Flicking | null;
     init(flicking: Flicking): this;
-    destroy(): this;
+    destroy(): void;
     enable(): this;
@@ -24,3 +26,7 @@ disable(): this;
     resetActivePanel(): this;
-    moveToPanel(panel: Panel, duration: number, axesEvent?: OnRelease): Promise<void>;
+    moveToPanel(panel: Panel, { duration, direction, axesEvent }: {
+        duration: number;
+        direction?: ValueOf<typeof DIRECTION>;
+        axesEvent?: OnRelease;
+    }): Promise<void>;
     protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease): void;
@@ -33,4 +39,4 @@ protected _animateToPosition({ position, duration, newActivePanel, axesEvent }: {
     }): Promise<void>;
-    protected _setActivePanel: (panel: Panel) => void;
+    protected _setActivePanel: (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => void;
 }
 export default Control;

declaration/control/index.d.ts

 import Control from "./Control";
 import SnapControl from "./SnapControl";
 import FreeControl from "./FreeControl";
-export { Control, SnapControl, FreeControl };
+import AxesController from "./AxesController";
+import State from "./states/State";
+import IdleState from "./states/IdleState";
+import HoldingState from "./states/HoldingState";
+import DraggingState from "./states/DraggingState";
+import AnimatingState from "./states/AnimatingState";
+import DisabledState from "./states/DisabledState";
+import StateMachine from "./StateMachine";
+export { Control, SnapControl, FreeControl, AxesController, State, IdleState, HoldingState, DraggingState, AnimatingState, DisabledState, StateMachine };

declaration/control/states/HoldingState.d.ts

 import State from "./State";
 declare class HoldingState extends State {
     readonly holding = true;
-    readonly animating = true;
+    readonly animating = false;
     private _releaseEvent;
@@ -6,0 +6,0 @@ onChange(ctx: Parameters<State["onChange"]>[0]): void;

declaration/core/Viewport.d.ts

@@ -9,3 +9,2 @@ declare class Viewport {
     constructor(el: HTMLElement);
-    destroy(): this;
     setSize({ width, height }: Partial<{
@@ -12,0 +11,0 @@ width: number | string;

declaration/Flicking.d.ts

@@ -7,4 +7,4 @@ import Component from "@egjs/component";
 import { Renderer } from "./renderer/index";
-import { EVENTS, ALIGN, MOVE_TYPE } from "./const/external";
-import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, ChangeEvent, RestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent } from "./type/event";
+import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
+import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, WillChangeEvent, WillRestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent, ChangedEvent, RestoredEvent } from "./type/event";
 import { LiteralUnion, ValueOf } from "./type/internal";
@@ -21,4 +21,6 @@ import { ElementLike } from "./type/external";
     [EVENTS.MOVE_END]: MoveEndEvent;
-    [EVENTS.CHANGE]: ChangeEvent;
-    [EVENTS.RESTORE]: RestoreEvent;
+    [EVENTS.WILL_CHANGE]: WillChangeEvent;
+    [EVENTS.CHANGED]: ChangedEvent;
+    [EVENTS.WILL_RESTORE]: WillRestoreEvent;
+    [EVENTS.RESTORED]: RestoredEvent;
     [EVENTS.SELECT]: SelectEvent;
@@ -49,4 +51,3 @@ [EVENTS.NEED_PANEL]: NeedPanelEvent;
     iOSEdgeSwipeThreshold: number;
-    isEqualSize: boolean | string[];
-    isConstantSize: boolean;
+    preventClickOnDrag: boolean;
     renderOnlyVisible: boolean;
@@ -56,3 +57,3 @@ autoInit: boolean;
     renderExternal: boolean;
-    useOffsetManipulator: boolean;
+    useOrderManipulator: boolean;
 }
@@ -65,3 +66,2 @@ declare class Flicking extends Component<FlickingEvents> {
     private _renderer;
-    private _contentsReadyChecker;
     private _align;
@@ -83,4 +83,3 @@ private _defaultIndex;
     private _iOSEdgeSwipeThreshold;
-    private _isEqualSize;
-    private _isConstantSize;
+    private _preventClickOnDrag;
     private _renderOnlyVisible;
@@ -90,3 +89,3 @@ private _autoResize;
     private _renderExternal;
-    private _useOffsetManipulator;
+    private _useOrderManipulator;
     private _initialized;
@@ -123,9 +122,8 @@ get control(): Control;
     get iOSEdgeSwipeThreshold(): FlickingOptions["iOSEdgeSwipeThreshold"];
-    get isEqualSize(): FlickingOptions["isEqualSize"];
-    get isConstantSize(): FlickingOptions["isConstantSize"];
+    get preventClickOnDrag(): FlickingOptions["preventClickOnDrag"];
     get renderOnlyVisible(): FlickingOptions["renderOnlyVisible"];
-    get autoInit(): FlickingOptions["autoInit"];
+    get autoInit(): boolean;
     get autoResize(): FlickingOptions["autoResize"];
     get renderExternal(): boolean;
-    get useOffsetManipulator(): boolean;
+    get useOrderManipulator(): FlickingOptions["useOrderManipulator"];
     set align(val: FlickingOptions["align"]);
@@ -146,8 +144,7 @@ set defaultIndex(val: FlickingOptions["defaultIndex"]);
     set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]);
-    set isEqualSize(val: FlickingOptions["isEqualSize"]);
-    set isConstantSize(val: FlickingOptions["isConstantSize"]);
+    set preventClickOnDrag(val: FlickingOptions["preventClickOnDrag"]);
     set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
-    set autoInit(val: FlickingOptions["autoInit"]);
     set autoResize(val: FlickingOptions["autoResize"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, needPanelThreshold, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, isEqualSize, isConstantSize, renderOnlyVisible, autoInit, autoResize, renderExternal, useOffsetManipulator }?: Partial<FlickingOptions>);
+    set useOrderManipulator(val: FlickingOptions["useOrderManipulator"]);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, needPanelThreshold, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, renderOnlyVisible, autoInit, autoResize, renderExternal, useOrderManipulator }?: Partial<FlickingOptions>);
     init(): this;
@@ -157,3 +154,3 @@ destroy(): void;
     next(duration?: number): Promise<void>;
-    moveTo(index: number, duration?: number): Promise<void>;
+    moveTo(index: number, duration?: number, direction?: ValueOf<typeof DIRECTION>): Promise<void>;
     getPanel(index: number): Panel | null;
@@ -180,3 +177,4 @@ enableInput(): this;
     private _moveToInitialPanel;
+    private _preventClickWhenDragged;
 }
 export default Flicking;

declaration/renderer/ElementManipulator.d.ts

 import Panel from "../core/Panel";
-import ExternalManipulator from "./ExternalManipulator";
-declare class ElementManipulator extends ExternalManipulator {
+import OffsetManipulator from "./OffsetManipulator";
+declare class ElementManipulator extends OffsetManipulator {
     insertPanelElements(panels: Panel[], nextSibling: Panel | null): this;
@@ -5,0 +5,0 @@ movePanelElementsToStart(panels: Panel[]): this;

declaration/renderer/index.d.ts

 import Renderer, { RendererOptions } from "./Renderer";
 import RawRenderer from "./RawRenderer";
 import VisibleRenderer from "./VisibleRenderer";
-export { Renderer, RawRenderer, VisibleRenderer };
+import ElementManipulator from "./ElementManipulator";
+import OffsetManipulator from "./OffsetManipulator";
+import OrderManipulator from "./OrderManipulator";
+export { Renderer, RawRenderer, VisibleRenderer, OffsetManipulator, ElementManipulator, OrderManipulator };
 export type { RendererOptions };

declaration/renderer/OffsetManipulator.d.ts

@@ -0,9 +1,20 @@
+import Component from "@egjs/component";
+import Flicking from "../Flicking";
 import Panel from "../core/Panel";
-import ExternalManipulator from "./ExternalManipulator";
 import { TogglePoint } from "../camera/CircularCamera";
-declare class OffsetManipulator extends ExternalManipulator {
+declare class OffsetManipulator extends Component<{
+    orderChanged: void;
+}> {
+    protected _flicking: Flicking | null;
+    constructor();
+    init(flicking: Flicking): void;
+    destroy(): void;
+    insertPanelElements(panels: Panel[], nextSibling: Panel | null): this;
     movePanelElementsToStart(panels: Panel[], togglePoints: TogglePoint[]): this;
     movePanelElementsToEnd(panels: Panel[], togglePoints: TogglePoint[]): this;
     resetPanelElementOrder(panels: Panel[]): this;
+    removePanelElements(panels: Panel[]): this;
+    removeAllChildNodes(element: HTMLElement): this;
+    removeAllTextNodes(element: HTMLElement): this;
 }
 export default OffsetManipulator;

declaration/renderer/Renderer.d.ts

 import Flicking, { FlickingOptions } from "../Flicking";
 import Panel from "../core/Panel";
-import ExternalManipulator from "./ExternalManipulator";
+import OffsetManipulator from "./OffsetManipulator";
 import { ElementLike } from "../type/external";
 export interface RendererOptions {
     align: FlickingOptions["align"];
-    elementManipulator: ExternalManipulator;
+    elementManipulator: OffsetManipulator;
 }
 declare abstract class Renderer {
     protected _flicking: Flicking | null;
-    protected _elementManipulator: ExternalManipulator;
+    protected _elementManipulator: OffsetManipulator;
     protected _panels: Panel[];
@@ -16,3 +16,3 @@ protected _align: RendererOptions["align"];
     get panelCount(): number;
-    get elementManipulator(): ExternalManipulator;
+    get elementManipulator(): OffsetManipulator;
     get align(): RendererOptions["align"];
@@ -31,3 +31,4 @@ set align(val: RendererOptions["align"]);
     protected _getPanelSizeSum(panels: Panel[]): number;
+    protected _updateCameraAndControl(): void;
 }
 export default Renderer;

declaration/type/event.d.ts

@@ -45,3 +45,3 @@ import { OnChange, OnFinish, OnHold, OnRelease } from "@egjs/axes";
 }
-export interface ChangeEvent extends ComponentEvent {
+export interface WillChangeEvent extends ComponentEvent {
     index: number;
@@ -51,11 +51,20 @@ panel: Panel;
     direction: ValueOf<typeof DIRECTION>;
-    axesEvent?: OnRelease;
 }
-export interface RestoreEvent extends ComponentEvent {
+export interface ChangedEvent extends ComponentEvent {
     index: number;
     panel: Panel;
+    prevIndex: number;
+    prevPanel: Panel | null;
     isTrusted: boolean;
     direction: ValueOf<typeof DIRECTION>;
-    axesEvent?: OnRelease;
 }
+export interface WillRestoreEvent extends ComponentEvent {
+    index: number;
+    panel: Panel;
+    isTrusted: boolean;
+    direction: ValueOf<typeof DIRECTION>;
+}
+export interface RestoredEvent extends ComponentEvent {
+    isTrusted: boolean;
+}
 export interface SelectEvent extends ComponentEvent {
@@ -62,0 +71,0 @@ index: number;

dist/flicking.min.js

@@ -9,3 +9,3 @@ /*
 */
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("@egjs/component"),require("@egjs/axes")):"function"==typeof define&&define.amd?define(["@egjs/component","@egjs/axes"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).Flicking=n(e.eg.Component,e.eg.Axes)}(this,function(Q,o){"use strict";var i=function(e,n){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])})(e,n)};function a(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function t(){this.constructor=e}i(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}var r=function(){return(r=Object.assign||function(e){for(var n,t=1,i=arguments.length;t<i;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)};function t(e,a,l,s){return new(l=l||Promise)(function(t,n){function i(e){try{o(s.next(e))}catch(e){n(e)}}function r(e){try{o(s.throw(e))}catch(e){n(e)}}function o(e){var n;e.done?t(e.value):((n=e.value)instanceof l?n:new l(function(e){e(n)})).then(i,r)}o((s=s.apply(e,a||[])).next())})}function g(t,i){var r,o,a,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},e={next:n(0),throw:n(1),return:n(2)};return"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function n(n){return function(e){return function(n){if(r)throw new TypeError("Generator is already executing.");for(;l;)try{if(r=1,o&&(a=2&n[0]?o.return:n[0]?o.throw||((a=o.return)&&a.call(o),0):o.next)&&!(a=a.call(o,n[1])).done)return a;switch(o=0,a&&(n=[2&n[0],a.value]),n[0]){case 0:case 1:a=n;break;case 4:return l.label++,{value:n[1],done:!1};case 5:l.label++,o=n[1],n=[0];continue;case 7:n=l.ops.pop(),l.trys.pop();continue;default:if(!(a=0<(a=l.trys).length&&a[a.length-1])&&(6===n[0]||2===n[0])){l=0;continue}if(3===n[0]&&(!a||n[1]>a[0]&&n[1]<a[3])){l.label=n[1];break}if(6===n[0]&&l.label<a[1]){l.label=a[1],a=n;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(n);break}a[2]&&l.ops.pop(),l.trys.pop();continue}n=i.call(t,l)}catch(e){n=[6,e],o=0}finally{r=a=0}if(5&n[0])throw n[1];return{value:n[0]?n[1]:void 0,done:!0}}([n,e])}}}function p(e){var n="function"==typeof Symbol&&Symbol.iterator,t=n&&e[n],i=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(n?"Object is not iterable.":"Symbol.iterator is not defined.")}function d(e,n){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var i,r,o=t.call(e),a=[];try{for(;(void 0===n||0<n--)&&!(i=o.next()).done;)a.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(t=o.return)&&t.call(o)}finally{if(r)throw r.error}}return a}function _(e,n){for(var t=0,i=n.length,r=e.length;t<i;t++,r++)e[r]=n[t];return e}function e(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.forEach(function(n){Object.keys(n).forEach(function(e){t[e]=n[e]})}),t}function l(e,n,t){return Math.max(Math.min(e,t),n)}function b(e,n){if(!e)throw new U(S(n),f);return e}function m(e){return[].slice.call(e)}function v(e){return Boolean(e)&&e.constructor===Array}function s(e,n){var t;if(oe(e))switch(e){case re.PREV:t=0;break;case re.CENTER:t=.5*n;break;case re.NEXT:t=n;break;default:if(null==(t=X(e,n)))throw new U(j("align",e),h)}else t=e;return t}function u(e){return oe(e)?e:e+"px"}function E(e,n){return e===n?G.NONE:e<n?G.NEXT:G.PREV}function P(e,n){return l(e<0?e+n:e,0,n)}function y(e,n){var t,i;try{for(var r=p(e),o=r.next();!o.done;o=r.next()){if(o.value===n)return 1}}catch(e){t={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}}var x,n,U=function(i){function r(e,n){var t=i.call(this,e)||this;return t.message=e,t.code=n,Object.setPrototypeOf(t,r.prototype),t.name="FlickingError",t}return a(r,i),r}(Error),$=0,ee=1,c=2,f=3,h=4,O=5,T=6,w=7,C=8,A=9,I=10,R=11,ne=function(e,n){return e+"("+typeof e+") is not a "+n.map(function(e){return'"'+e+'"'}).join(" or ")+"."},te=function(e){return'Element with selector "'+e+'" not found.'},k=function(e,n){return n+" should be provided. Given: "+e},S=function(e){return e+' is not attached to the Flicking instance. "init()" should be called first.'},j=function(e,n){return'Option "'+e+'" is not in correct format, given: '+n},N=function(e,n,t){return'Index "'+e+'" is out of range: should be between '+n+" and "+t+"."},z=function(e){return'Position "'+e+'" is not reachable.'},D="Browser does not support CSS transform",M="Event stop() is called by user",L="Animation is interrupted by user input",V="Animation is already playing",H="This behavior is not allowed in the frameworks like React, Vue, or Angular",ie={READY:"ready",BEFORE_RESIZE:"beforeResize",AFTER_RESIZE:"afterResize",HOLD_START:"holdStart",HOLD_END:"holdEnd",MOVE_START:"moveStart",MOVE:"move",MOVE_END:"moveEnd",CHANGE:"change",RESTORE:"restore",SELECT:"select",NEED_PANEL:"needPanel",VISIBLE_CHANGE:"visibleChange",REACH_EDGE:"reachEdge"},re={PREV:"prev",CENTER:"center",NEXT:"next"},G={PREV:"PREV",NEXT:"NEXT",NONE:null},F={SNAP:"snap",FREE_SCROLL:"freeScroll"},B={__proto__:null,EVENTS:ie,ALIGN:re,DIRECTION:G,MOVE_TYPE:F},X=function(e,n){var t=/(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;if("number"==typeof e)return e;for(var i=0,r=0,o=t.exec(e);null!=o;){var a=o[1],l=o[2],s=o[3],u=parseFloat(l);if(i<=0&&(a=a||"+"),!a)return null;"%"===s&&(u=u/100*n),r+="+"===a?u:-u,++i,o=t.exec(e)}return 0===i?null:r},oe=function(e){return"string"==typeof e},ae=function(){function e(e){this._el=e,this._width=0,this._height=0}var n=e.prototype;return Object.defineProperty(n,"element",{get:function(){return this._el},enumerable:!1,configurable:!0}),Object.defineProperty(n,"width",{get:function(){return this._width},enumerable:!1,configurable:!0}),Object.defineProperty(n,"height",{get:function(){return this._height},enumerable:!1,configurable:!0}),n.destroy=function(){return this},n.setSize=function(e){var n=e.width,t=e.height,i=this._el;null!=n&&(i.style.width=u(n)),null!=t&&(i.style.height=u(t)),this.resize()},n.resize=function(){var e=this._el;this._width=e.offsetWidth,this._height=e.offsetHeight},e}();(n=x=x||{})[n.IDLE=0]="IDLE",n[n.HOLDING=1]="HOLDING",n[n.DRAGGING=2]="DRAGGING",n[n.ANIMATING=3]="ANIMATING",n[n.DISABLED=4]="DISABLED";var q=function(){function e(){}var n=e.prototype;return n.onHold=function(e){},n.onChange=function(e){},n.onRelease=function(e){},n.onAnimationEnd=function(e){},n.onFinish=function(e){},e}(),Y=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!1,e.animating=!1,e}a(e,n);var t=e.prototype;return t.onHold=function(e){var n,t=e.flicking,i=e.axesEvent,r=e.transitTo;t.renderer.panelCount<=0?r(x.DISABLED):(n=new Q.ComponentEvent(ie.HOLD_START,{axesEvent:i}),t.trigger(n),n.isCanceled()?r(x.DISABLED):r(x.HOLDING))},t.onChange=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo,r=n.control.controller.animatingContext,o=new Q.ComponentEvent(ie.MOVE_START,{isTrusted:t.isTrusted,holding:this.holding,direction:E(r.start,r.end),axesEvent:t});n.trigger(o),o.isCanceled()?i(x.DISABLED):i(x.ANIMATING).onChange(e)},e}(q),Z=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!0,e.animating=!0,e._releaseEvent=null,e}a(e,n);var t=e.prototype;return t.onChange=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo,r=t.inputEvent,o=n.horizontal?r.offsetX:r.offsetY,a=new Q.ComponentEvent(ie.MOVE_START,{isTrusted:t.isTrusted,holding:this.holding,direction:E(0,-o),axesEvent:t});n.trigger(a),a.isCanceled()?i(x.DISABLED):i(x.DRAGGING).onChange(e)},t.onRelease=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo;if(n.trigger(new Q.ComponentEvent(ie.HOLD_END,{axesEvent:t})),0!==t.delta.flick)return t.setTo({flick:n.camera.position},0),void i(x.IDLE);this._releaseEvent=t},t.onFinish=function(e){var n,t,i=e.flicking;if((0,e.transitTo)(x.IDLE),this._releaseEvent){var r,o,a=this._releaseEvent.inputEvent.srcEvent;o="touchend"===a.type?(r=a.changedTouches[0],document.elementFromPoint(r.clientX,r.clientY)):a.target;var l,s,u=i.renderer.panels,c=null;try{for(var f=p(u),h=f.next();!h.done;h=f.next()){var d=h.value;if(d.contains(o)){c=d;break}}}catch(e){n={error:e}}finally{try{h&&!h.done&&(t=f.return)&&t.call(f)}finally{if(n)throw n.error}}c&&(l=i.camera.position,s=c.position,i.trigger(new Q.ComponentEvent(ie.SELECT,{index:c.index,panel:c,direction:E(l,s)})))}},e}(q),W={HOLD:"hold",CHANGE:"change",RELEASE:"release",ANIMATION_END:"animationEnd",FINISH:"finish"},J="flick",K=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!0,e.animating=!0,e}a(e,n);var t=e.prototype;return t.onChange=function(e){var n,t,i,r=e.flicking,o=e.axesEvent,a=e.transitTo;o.delta[J]&&(t=(n=r.camera).position,n.lookAt(o.pos[J]),i=new Q.ComponentEvent(ie.MOVE,{isTrusted:o.isTrusted,holding:this.holding,direction:E(0,o.delta[J]),axesEvent:o}),r.trigger(i),i.isCanceled()&&(n.lookAt(t),a(x.DISABLED)))},t.onRelease=function(e){var n,t,i,r=e.flicking,o=e.axesEvent,a=e.transitTo;r.trigger(new Q.ComponentEvent(ie.HOLD_END,{axesEvent:o})),r.renderer.panelCount<=0?a(x.IDLE):(a(x.ANIMATING),n=r.control,t=o.destPos[J],i=Math.max(o.duration,r.duration),n.moveToPosition(t,i,o))},e}(q),le=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!1,e.animating=!0,e}a(e,n);var t=e.prototype;return t.onHold=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo,r=new Q.ComponentEvent(ie.HOLD_START,{axesEvent:t});n.trigger(r),r.isCanceled()?i(x.DISABLED):i(x.DRAGGING)},t.onChange=function(e){var n,t,i,r=e.flicking,o=e.axesEvent,a=e.transitTo;o.delta.flick&&(t=(n=r.camera).position,n.lookAt(o.pos.flick),i=new Q.ComponentEvent(ie.MOVE,{isTrusted:o.isTrusted,holding:this.holding,direction:E(0,o.delta.flick),axesEvent:o}),r.trigger(i),i.isCanceled()&&(r.camera.lookAt(t),a(x.DISABLED)))},t.onFinish=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo,r=n.camera,o=r.findAnchorIncludePosition(r.position);n.horizontal&&n.adaptive&&o&&n.viewport.setSize({height:o.panel.height}),i(x.IDLE);var a=n.control.controller.animatingContext;n.trigger(new Q.ComponentEvent(ie.MOVE_END,{isTrusted:t.isTrusted,direction:E(a.start,a.end),axesEvent:t}))},e}(q),se=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!1,e.animating=!0,e}a(e,n);var t=e.prototype;return t.onAnimationEnd=function(e){(0,e.transitTo)(x.IDLE)},t.onChange=function(e){var n=e.axesEvent,t=e.transitTo;n.stop(),t(x.IDLE)},t.onRelease=function(e){var n=e.axesEvent,t=e.transitTo;0===n.delta.flick&&t(x.IDLE)},e}(q),ue=function(){function e(){var t=this;this.transitTo=function(e){var n;switch(e){case x.IDLE:n=new Y;break;case x.HOLDING:n=new Z;break;case x.DRAGGING:n=new K;break;case x.ANIMATING:n=new le;break;case x.DISABLED:n=new se}return t._state=n,t._state},this._state=new Y}var n=e.prototype;return Object.defineProperty(n,"state",{get:function(){return this._state},enumerable:!1,configurable:!0}),n.fire=function(e,n){var t=this._state,i=r(r({},n),{transitTo:this.transitTo});switch(e){case W.HOLD:t.onHold(i);break;case W.CHANGE:t.onChange(i);break;case W.RELEASE:t.onRelease(i);break;case W.ANIMATION_END:t.onAnimationEnd(i);break;case W.FINISH:t.onFinish(i)}},e}(),ce=function(){function e(){this._resetInternalValues(),this._stateMachine=new ue}var n=e.prototype;return Object.defineProperty(n,"axes",{get:function(){return this._axes},enumerable:!1,configurable:!0}),Object.defineProperty(n,"state",{get:function(){return this._stateMachine.state},enumerable:!1,configurable:!0}),Object.defineProperty(n,"animatingContext",{get:function(){return this._animatingContext},enumerable:!1,configurable:!0}),Object.defineProperty(n,"enabled",{get:function(){var e,n;return null!==(n=null===(e=this._panInput)||void 0===e?void 0:e.isEnable())&&void 0!==n&&n},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){var e,n;return null!==(n=null===(e=this._axes)||void 0===e?void 0:e.get([J])[J])&&void 0!==n?n:0},enumerable:!1,configurable:!0}),n.init=function(t){var e,i=this;this._flicking=t,this._axes=new o(((e={})[J]={range:[0,0],circular:!1,bounce:[0,0]},e),{deceleration:t.deceleration,interruptable:t.interruptable,easing:t.easing}),this._panInput=new o.PanInput(t.viewport.element,{inputType:t.inputType,iOSEdgeSwipeThreshold:t.iOSEdgeSwipeThreshold,scale:t.horizontal?[-1,0]:[0,-1]});var r=this._axes;r.connect(t.horizontal?[J,""]:["",J],this._panInput);for(var n in W)!function(e){var n=W[e];r.on(n,function(e){i._stateMachine.fire(n,{flicking:t,axesEvent:e})})}(n)},n.destroy=function(){var e,n;return null!==(e=this._axes)&&void 0!==e&&e.destroy(),null!==(n=this._panInput)&&void 0!==n&&n.destroy(),this._resetInternalValues(),this},n.enable=function(){var e;return null!==(e=this._panInput)&&void 0!==e&&e.enable(),this},n.disable=function(){var e;return null!==(e=this._panInput)&&void 0!==e&&e.disable(),this},n.update=function(){var e,n,t,i,r=b(this._flicking,"Control"),o=r.camera,a=this._axes,l=o.controlParams,s=a.axis[J];return s.circular=[l.circular,l.circular],s.range=[l.range.min,l.range.max],s.bounce=(n=r.bounce,t=o.size,(v(n)?n.map(function(e){return X(e,t)}):[i=X(n,t),i]).map(function(e){if(null==e)throw new U(j("bounce",n),h);return e})),a.axm.set(((e={})[J]=l.position,e)),this},n.animateTo=function(t,i,r){var e,o=this,a=this._axes;if(!a)return Promise.reject(new U(S("Control"),f));var n=a.get([J])[J];if(n===t)return b(this._flicking,"Control").camera.lookAt(t),Promise.resolve();this._animatingContext={start:n,end:t,offset:0};function l(){var e,n;a.once(W.FINISH,function(){o._animatingContext={start:0,end:0,offset:0}}),r?r.setTo(((e={})[J]=t,e),i):a.setTo(((n={})[J]=t,n),i)}return 0===i?(l(),a.axm.set(((e={})[J]=t,e)),Promise.resolve()):new Promise(function(e,n){function t(){a.off(W.HOLD,i),e()}var i=function(){a.off(W.FINISH,t),n(new U(L,A))};a.once(W.FINISH,t),r||a.once(W.HOLD,i),l()})},n._resetInternalValues=function(){this._flicking=null,this._axes=null,this._panInput=null,this._animatingContext={start:0,end:0,offset:0}},e}(),fe=function(){function e(){var n=this;this._setActivePanel=function(e){n._activePanel=e},this._flicking=null,this._controller=new ce,this._activePanel=null}var n=e.prototype;return Object.defineProperty(n,"controller",{get:function(){return this._controller},enumerable:!1,configurable:!0}),Object.defineProperty(n,"activeIndex",{get:function(){var e,n;return null!==(n=null===(e=this._activePanel)||void 0===e?void 0:e.index)&&void 0!==n?n:-1},enumerable:!1,configurable:!0}),Object.defineProperty(n,"activePanel",{get:function(){return this._activePanel},enumerable:!1,configurable:!0}),Object.defineProperty(n,"animating",{get:function(){return this._controller.state.animating},enumerable:!1,configurable:!0}),Object.defineProperty(n,"holding",{get:function(){return this._controller.state.holding},enumerable:!1,configurable:!0}),n.init=function(e){return this._flicking=e,this._controller.init(e),this},n.destroy=function(){return this._controller.destroy(),this._flicking=null,this._activePanel=null,this},n.enable=function(){return this._controller.enable(),this},n.disable=function(){return this._controller.disable(),this},n.updateInput=function(){return this._controller.update(),this},n.resetActivePanel=function(){return this._activePanel=null,this},n.moveToPanel=function(o,a,l){return t(this,void 0,void 0,function(){var n,t,i,r;return g(this,function(e){if(n=b(this._flicking,"Control"),t=n.camera,i=o.position,!t.canReach(o)){if(!(r=t.findNearestAnchor(i)))return[2,Promise.reject(new U(z(o.position),T))];i=r.position,o=r.panel}return this._triggerIndexChangeEvent(o,o.position,l),[2,this._animateToPosition({position:i,duration:a,newActivePanel:o,axesEvent:l})]})})},n._triggerIndexChangeEvent=function(e,n,t){var i,r=b(this._flicking,"Control"),o=e!==this._activePanel?ie.CHANGE:ie.RESTORE,a=r.camera,l=this._activePanel,s=new Q.ComponentEvent(o,{index:e.index,panel:e,isTrusted:(null==t?void 0:t.isTrusted)||!1,direction:E(null!==(i=null==l?void 0:l.position)&&void 0!==i?i:a.position,n)});if(r.trigger(s),s.isCanceled())throw new U(M,C)},n._animateToPosition=function(e){var i=e.position,r=e.duration,o=e.newActivePanel,a=e.axesEvent;return t(this,void 0,void 0,function(){var n,t=this;return g(this,function(e){return n=function(){return t._controller.animateTo(i,r,a)},0===r?(this._setActivePanel(o),[2,n()]):[2,n().then(function(){return t._setActivePanel(o)})]})})},e}(),he=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.moveToPosition=function(f,h,d){return t(this,void 0,void 0,function(){var n,t,i,r,o,a,l,s,u,c;return g(this,function(e){return n=b(this._flicking,"Control"),t=n.camera,i=this._activePanel,r=t.clampToReachablePosition(f),(o=t.findNearestAnchor(r))&&i?(a=i.position,l=Math.abs(f-a)>=n.threshold,s=a<f?t.getNextAnchor(o):t.getPrevAnchor(o),l&&o.position!==i.position?(c=o.panel,u=o.position):l&&s?(c=s.panel,u=s.position):(u=i.position,c=i),this._triggerIndexChangeEvent(c,f,d),[2,this._animateToPosition({position:u,duration:h,newActivePanel:c,axesEvent:d})]):[2,Promise.reject(new U(z(f),T))]})})},n}(fe),de=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.moveToPosition=function(l,s,u){return t(this,void 0,void 0,function(){var n,t,i,r,o,a;return g(this,function(e){return n=b(this._flicking,"Control"),t=n.camera,i=t.clampToReachablePosition(l),r=t.findAnchorIncludePosition(i),o=this._activePanel,r?((a=r.panel)!==o&&this._triggerIndexChangeEvent(a,l,u),[2,this._animateToPosition({position:l,duration:s,newActivePanel:a,axesEvent:u})]):[2,Promise.reject(new U(z(l),T))]})})},n}(fe),ge={__proto__:null,Control:fe,SnapControl:he,FreeControl:de},pe=function(){function e(e){var n=e.index,t=e.position,i=e.panel;this._index=n,this._pos=t,this._panel=i}var n=e.prototype;return Object.defineProperty(n,"index",{get:function(){return this._index},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){return this._pos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panel",{get:function(){return this._panel},enumerable:!1,configurable:!0}),e}(),_e=function(){function e(e){var l=this,n=(void 0===e?{}:e).align,t=void 0===n?re.CENTER:n;this._checkTranslateSupport=function(){var n,e,t=document.documentElement.style,i="";try{for(var r=p(["webkitTransform","msTransform","MozTransform","OTransform","transform"]),o=r.next();!o.done;o=r.next()){var a=o.value;a in t&&(i=a)}}catch(e){n={error:e}}finally{try{o&&!o.done&&(e=r.return)&&e.call(r)}finally{if(n)throw n.error}}if(!i)throw new U(D,w);l._transform=i},this._flicking=null,this._resetInternalValues(),this._align=t}var n=e.prototype;return Object.defineProperty(n,"element",{get:function(){return this._el},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){return this._position},enumerable:!1,configurable:!0}),Object.defineProperty(n,"alignPosition",{get:function(){return this._alignPos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"offset",{get:function(){return this._offset},set:function(e){this._offset=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"range",{get:function(){return this._range},enumerable:!1,configurable:!0}),Object.defineProperty(n,"rangeDiff",{get:function(){return this._range.max-this._range.min},enumerable:!1,configurable:!0}),Object.defineProperty(n,"visiblePanels",{get:function(){return this._visiblePanels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"visibleRange",{get:function(){return{min:this._position-this._alignPos,max:this._position-this._alignPos+this.size}},enumerable:!1,configurable:!0}),Object.defineProperty(n,"anchorPoints",{get:function(){return this._anchors},enumerable:!1,configurable:!0}),Object.defineProperty(n,"controlParams",{get:function(){return{range:this._range,position:this._position,circular:!1}},enumerable:!1,configurable:!0}),Object.defineProperty(n,"size",{get:function(){var e=this._flicking;return e?e.horizontal?e.viewport.width:e.viewport.height:0},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e},enumerable:!1,configurable:!0}),n.init=function(e){var n=(this._flicking=e).viewport.element;return function(e,n){if(null==e)throw new U(k(e,n),c)}(n.firstElementChild,"First element child of the viewport element"),this._el=n.firstElementChild,this._checkTranslateSupport(),this},n.destroy=function(){return this._flicking=null,this._resetInternalValues(),this},n.lookAt=function(e){var n=this._position;return this._position=e,this._refreshVisiblePanels(),this._checkNeedPanel(),this._checkReachEnd(n,e),this._applyTransform(),this},n.getPrevAnchor=function(e){return this._anchors[e.index-1]||null},n.getNextAnchor=function(e){return this._anchors[e.index+1]||null},n.findAnchorIncludePosition=function(e){var n,t,i=this._anchors;try{for(var r=p(i),o=r.next();!o.done;o=r.next()){var a=o.value;if(a.panel.includePosition(e,!0))return a}}catch(e){n={error:e}}finally{try{o&&!o.done&&(t=r.return)&&t.call(r)}finally{if(n)throw n.error}}return null},n.findNearestAnchor=function(e){var n=this._anchors;if(n.length<=0)return null;for(var t=1/0,i=0;i<n.length;i++){var r=n[i],o=Math.abs(r.position-e);if(t<o)return n[i-1];t=o}return n[n.length-1]},n.clampToReachablePosition=function(e){var n=this._range;return l(e,n.min,n.max)},n.canReach=function(e){var n=this._range;if(e.removed)return!1;var t=e.position;return t>=n.min&&t<=n.max},n.canSee=function(e){var n=this.visibleRange;return e.includeRange(n.min,n.max,!1)},n.updateAlignPos=function(){var e=this._align,n="object"==typeof e?e.camera:e;return this._alignPos=s(n,this.size),this},n.updateAnchors=function(){var e=b(this._flicking,"Camera").renderer.panels;return this._anchors=e.map(function(e,n){return new pe({index:n,position:e.position,panel:e})}),this},n.resetNeedPanelHistory=function(){this._needPanelTriggered={prev:!1,next:!1}},n._resetInternalValues=function(){this._position=0,this._alignPos=0,this._offset=0,this._range={min:0,max:0},this._visiblePanels=[],this._anchors=[],this._needPanelTriggered={prev:!1,next:!1}},n._refreshVisiblePanels=function(){var n=this,e=b(this._flicking,"Camera"),t=e.renderer.panels.filter(function(e){return n.canSee(e)}),i=this._visiblePanels,r=(this._visiblePanels=t).filter(function(e){return!y(i,e)}),o=i.filter(function(e){return!y(t,e)});(0<r.length||0<o.length)&&(e.renderer.render(),e.trigger(new Q.ComponentEvent(ie.VISIBLE_CHANGE,{added:r,removed:o,visiblePanels:t})))},n._checkNeedPanel=function(){var e=this._needPanelTriggered;if(!e.prev||!e.next){var n=b(this._flicking,"Camera"),t=n.renderer.panels;if(t.length<=0)return e.prev||(n.trigger(new Q.ComponentEvent(ie.NEED_PANEL,{direction:G.PREV})),e.prev=!0),void(e.next||(n.trigger(new Q.ComponentEvent(ie.NEED_PANEL,{direction:G.NEXT})),e.next=!0));var i=this._position,r=this.size,o=this._range,a=n.needPanelThreshold,l=i-this._alignPos,s=l+r,u=t[0],c=t[t.length-1];e.prev||(l<=u.range.min+a||i<=o.min+a)&&(n.trigger(new Q.ComponentEvent(ie.NEED_PANEL,{direction:G.PREV})),e.prev=!0),e.next||(c.range.max-a<=s||i>=o.max-a)&&(n.trigger(new Q.ComponentEvent(ie.NEED_PANEL,{direction:G.NEXT})),e.next=!0)}},n._checkReachEnd=function(e,n){var t,i=b(this._flicking,"Camera"),r=this._range,o=e>r.min&&e<r.max,a=n>r.min&&n<r.max;o&&!a&&(t=n<=r.min?G.PREV:G.NEXT,i.trigger(new Q.ComponentEvent(ie.REACH_EDGE,{direction:t})))},n._applyTransform=function(){var e=this._el,n=b(this._flicking,"Camera"),t=this._position-this._alignPos-this._offset;e.style[this._transform]=n.horizontal?"translate("+-t+"px)":"translate(0, "+-t+"px)"},e}(),me=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.updateRange=function(){var e,n,t=b(this._flicking,"Camera").renderer,i=t.getPanel(0),r=t.getPanel(t.panelCount-1);return this._range={min:null!==(e=null==i?void 0:i.position)&&void 0!==e?e:0,max:null!==(n=null==r?void 0:r.position)&&void 0!==n?n:0},this},n}(_e),ve=function(c){function e(){var e=null!==c&&c.apply(this,arguments)||this;return e._circularOffset=0,e._circularEnabled=!1,e._panelTooglePoints={},e}a(e,c);var n=e.prototype;return Object.defineProperty(n,"controlParams",{get:function(){return{range:this._range,position:this._position,circular:this._circularEnabled}},enumerable:!1,configurable:!0}),n.getPrevAnchor=function(e){if(!this._circularEnabled||0!==e.index)return c.prototype.getPrevAnchor.call(this,e);var n=this._anchors,t=this.rangeDiff,i=n[n.length-1];return new pe({index:i.index,position:i.position-t,panel:i.panel})},n.getNextAnchor=function(e){var n=this._anchors;if(!this._circularEnabled||e.index!==n.length-1)return c.prototype.getNextAnchor.call(this,e);var t=this.rangeDiff,i=n[0];return new pe({index:i.index,position:i.position+t,panel:i.panel})},n.findAnchorIncludePosition=function(e){if(!this._circularEnabled)return c.prototype.findAnchorIncludePosition.call(this,e);var n,t,i,r,o=this._range,a=(n=e,t=o.min,i=o.max,r=i-t,n<t?n=i-(t-n)%r:i<n&&(n=t+(n-i)%r),n),l=c.prototype.findAnchorIncludePosition.call(this,a);if(!l)return null;var s=this.rangeDiff;if(e<o.min){var u=-Math.floor((o.min-e)/s)-1;return new pe({index:l.index,position:l.position+s*u,panel:l.panel})}if(e>o.max){u=Math.floor((e-o.max)/s)+1;return new pe({index:l.index,position:l.position+s*u,panel:l.panel})}return l},n.clampToReachablePosition=function(e){return this._circularEnabled?e:c.prototype.clampToReachablePosition.call(this,e)},n.canReach=function(e){return!e.removed&&(!!this._circularEnabled||c.prototype.canReach.call(this,e))},n.canSee=function(e){var n=this._range,t=this.rangeDiff,i=this.visibleRange,r=c.prototype.canSee.call(this,e);return this._circularEnabled?i.min<n.min?r||e.includeRange(i.min+t,i.max+t,!1):i.max>n.max?r||e.includeRange(i.min-t,i.max-t,!1):r:r},n.updateRange=function(){var e=b(this._flicking,"Camera").renderer,n=e.panels;if(n.length<=0)return this._resetInternalValues(),this;var a,l,s,u,c,f,h,d,g,p=this._position,t=n[0],i=n[n.length-1],r=t.range.min-t.margin.prev,o=i.range.max+i.margin.next,_=this.size,m=o-r,v=n.every(function(e){return m-e.size>=_});return v?(this._range={min:r,max:o},a={},l=this._alignPos,s=[],u=[],c=[],f=[],h=this._range,d=h.min-l,g=h.max-l+_,n.forEach(function(e){var n,t,i,r=e.includeRange(g-_,g,!1),o=e.includeRange(d,d+_,!1);r&&(n=e.range.max+h.min-h.max+l,i={panel:e,direction:G.PREV,toggled:t=p<n},a[n]=i,t&&(s.push(e),u.push(i))),o&&(t=(n=e.range.min+h.max-_+l)<p,i={panel:e,direction:G.NEXT,toggled:!1},a[n]=i,t&&(c.push(e),f.push(i)))}),e.elementManipulator.movePanelElementsToStart(s,u),e.elementManipulator.movePanelElementsToEnd(c,f),this._circularOffset=this._calcPanelAreaSum(s)-this._calcPanelAreaSum(c),this._panelTooglePoints=a):(this._range={min:t.position,max:i.position},this._circularOffset=0,this._panelTooglePoints={}),this._circularEnabled=v,this},n.lookAt=function(o){var a,l,e,n=b(this._flicking,"Camera"),s=this._position,u=this._panelTooglePoints,t=n.renderer.elementManipulator,i=Object.keys(u).map(function(e){return parseFloat(e)}).sort(function(e,n){return e-n});return o===s||(s<o?(a=[],e=i.reduce(function(e,n){var t=u[n],i=s<=n&&n<=o,r=t.direction===G.NEXT&&!t.toggled||t.direction===G.PREV&&t.toggled;return i&&r&&(t.toggled=!t.toggled,e.push(t.panel),a.push(t)),e},[]),t.movePanelElementsToEnd(e,a),this._circularOffset-=this._calcPanelAreaSum(e)):(l=[],e=i.reduce(function(e,n){var t=u[n],i=n<=s&&o<=n,r=t.direction===G.NEXT&&t.toggled||t.direction===G.PREV&&!t.toggled;return i&&r&&(t.toggled=!t.toggled,e.push(t.panel),l.push(t)),e},[]),t.movePanelElementsToStart(e,l),this._circularOffset+=this._calcPanelAreaSum(e)),n.renderer.render()),c.prototype.lookAt.call(this,o)},n._applyTransform=function(){var e=this._el,n=b(this._flicking,"Camera"),t=this._position-this._alignPos-this._offset+this._circularOffset;e.style[this._transform]=n.horizontal?"translate("+-t+"px)":"translate(0, "+-t+"px)"},n._resetInternalValues=function(){c.prototype._resetInternalValues.call(this),this._circularOffset=0,this._circularEnabled=!1,this._panelTooglePoints={}},n._calcPanelAreaSum=function(e){return e.reduce(function(e,n){return e+n.sizeIncludingMargin},0)},e}(_e),be=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}a(n,e);var t=n.prototype;return t.updateRange=function(){var e=b(this._flicking,"Camera").renderer,n=this._alignPos,t=e.getPanel(0),i=e.getPanel(e.panelCount-1);if(!t||!i)return this._range={min:0,max:0},this;var r=this.size,o=t.range.min,a=i.range.max,l=r<a-o;return this._range=l?{min:o+n,max:a-n}:{min:t.position,max:i.position},this},t.updateAnchors=function(){var n=this,e=b(this._flicking,"Camera").renderer.panels;if(e.length<=0)return this._anchors=[],this;var t=this._range,i=e.filter(function(e){return n.canReach(e)}),r=i[0].position!==t.min,o=i[i.length-1].position!==t.max,a=r?1:0,l=i.map(function(e,n){return new pe({index:n+a,position:e.position,panel:e})});return r&&l.splice(0,0,new pe({index:0,position:t.min,panel:function(e,n){var t,i;try{for(var r=p(e),o=r.next();!o.done;o=r.next()){var a=o.value;if(n(a))return a}}catch(e){t={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}return null}(e,function(e){return e.includePosition(t.min)})})),o&&l.push(new pe({index:l.length,position:t.max,panel:function(e,n){for(var t=e.length-1;0<=t;t--){var i=e[t];if(n(i))return i}return null}(e,function(e){return e.includePosition(t.min)})})),this._anchors=l,this},n}(_e),Ee={__proto__:null,Camera:_e,LinearCamera:me,CircularCamera:ve,BoundCamera:be},Pe=function(){function e(e){var n=e.el,t=e.index,i=e.align,r=e.flicking;this._el=n,this._index=t,this._flicking=r,this._align=i,this._removed=!1,this._resetInternalStates()}var n=e.prototype;return Object.defineProperty(n,"element",{get:function(){return this._el},enumerable:!1,configurable:!0}),Object.defineProperty(n,"index",{get:function(){return this._index},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){return this._pos+this._alignPos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"size",{get:function(){return this._size},enumerable:!1,configurable:!0}),Object.defineProperty(n,"sizeIncludingMargin",{get:function(){return this._size+this._margin.prev+this._margin.next},enumerable:!1,configurable:!0}),Object.defineProperty(n,"height",{get:function(){return this._height},enumerable:!1,configurable:!0}),Object.defineProperty(n,"margin",{get:function(){return this._margin},enumerable:!1,configurable:!0}),Object.defineProperty(n,"alignPosition",{get:function(){return this._alignPos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"offset",{get:function(){return this._offset},enumerable:!1,configurable:!0}),Object.defineProperty(n,"removed",{get:function(){return this._removed},enumerable:!1,configurable:!0}),Object.defineProperty(n,"range",{get:function(){return{min:this._pos,max:this._pos+this._size}},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e},enumerable:!1,configurable:!0}),n.resize=function(){var e=this._el,n=window.getComputedStyle(e)||e.currentStyle,t=this._flicking,i=t.horizontal,r=t.renderer.panels[this._index-1];return this._size=i?e.offsetWidth:e.offsetHeight,this._margin=i?{prev:parseFloat(n.marginLeft),next:parseFloat(n.marginRight)}:{prev:parseFloat(n.marginTop),next:parseFloat(n.marginBottom)},this._pos=r?r.range.max+r.margin.next+this._margin.prev:this._margin.prev,this._height=i?e.offsetHeight:this._size,this._updateAlignPos(),this},n.contains=function(e){return this._el.contains(e)},n.destroy=function(){this._resetInternalStates(),this._removed=!0},n.includePosition=function(e,n){return void 0===n&&(n=!1),this.includeRange(e,e,n)},n.includeRange=function(e,n,t){void 0===t&&(t=!1);var i=this._margin,r=this.range;return t&&(r.min-=i.prev,r.max+=i.next),n>=r.min&&e<=r.max},n.focus=function(e){return this._flicking.moveTo(this._index,e)},n.prev=function(){var e=this._index,n=this._flicking,t=n.renderer,i=t.panelCount;return 1===i?null:n.circularEnabled?t.getPanel(0===e?i-1:e-1):t.getPanel(e-1)},n.next=function(){var e=this._index,n=this._flicking,t=n.renderer,i=t.panelCount;return 1===i?null:n.circularEnabled?t.getPanel(e===i-1?0:e+1):t.getPanel(e+1)},n.increaseIndex=function(e){return this._index+=Math.max(e,0),this},n.decreaseIndex=function(e){return this._index-=Math.max(e,0),this},n.increasePosition=function(e){return this._moveBy(Math.max(e,0)),this},n.decreasePosition=function(e){return this._moveBy(-Math.max(e,0)),this},n.increaseOffset=function(e){return this._offset+=Math.max(e,0),this},n.decreaseOffset=function(e){return this._offset-=Math.max(e,0),this},n.resetOffset=function(){return this._offset=0,this},n._moveBy=function(e){return this._pos+=e,this},n._updateAlignPos=function(){this._alignPos=s(this._align,this._size)},n._resetInternalStates=function(){this._size=0,this._pos=0,this._margin={prev:0,next:0},this._height=0,this._alignPos=0,this._offset=0},e}(),ye=function(n){function e(){var e=n.call(this)||this;return e._flicking=null,e}a(e,n);var t=e.prototype;return t.init=function(e){this._flicking=e},t.destroy=function(){this._flicking=null},t.insertPanelElements=function(e,n){return this},t.movePanelElementsToStart=function(e,n){var t=b(this._flicking,"Renderer").camera.rangeDiff;return e.forEach(function(e,n){e.decreaseOffset(t)}),0<e.length&&this.trigger("orderChanged"),this},t.movePanelElementsToEnd=function(e,n){var t=b(this._flicking,"Renderer").camera.rangeDiff;return e.forEach(function(e,n){e.increaseOffset(t)}),0<e.length&&this.trigger("orderChanged"),this},t.resetPanelElementOrder=function(e){return e.forEach(function(e){e.resetOffset()}),0<e.length&&this.trigger("orderChanged"),this},t.removePanelElements=function(e){return this},t.removeAllChildNodes=function(e){return this},t.removeAllTextNodes=function(e){return this},e}(Q),xe=function(){function e(e){var n=void 0===e?{}:e,t=n.align,i=void 0===t?re.CENTER:t,r=n.elementManipulator,o=void 0===r?new ye:r;this._align=i,this._flicking=null,this._elementManipulator=o,this._panels=[]}var n=e.prototype;return Object.defineProperty(n,"panels",{get:function(){return this._panels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panelCount",{get:function(){return this._panels.length},enumerable:!1,configurable:!0}),Object.defineProperty(n,"elementManipulator",{get:function(){return this._elementManipulator},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e;var n=this._getPanelAlign();this._panels.forEach(function(e){e.align=n})},enumerable:!1,configurable:!0}),n.init=function(e){return this._flicking=e,this._elementManipulator.init(e),this._collectPanels(),this},n.destroy=function(){this._flicking=null,this._panels=[],this._elementManipulator.destroy()},n.getPanel=function(e){return this._panels[e]||null},n.insert=function(e,n){var t=this._panels,i=this._elementManipulator,r=b(this._flicking,"Renderer"),o=r.camera,a=r.control,l=this._getPanelAlign(),s=function(e){v(e)||(e=[e]);var t=[];return e.forEach(function(e){if(oe(e)){var n=document.createElement("div");for(n.innerHTML=e,t.push.apply(t,_([],d(m(n.children))));n.firstChild;)n.removeChild(n.firstChild)}else{if(!e||e.nodeType!==Node.ELEMENT_NODE)throw new U(ne(e,["HTMLElement","string"]),$);t.push(e)}}),t}(n),u=P(e,t.length),c=t.slice(u),f=s.map(function(e,n){return new Pe({el:e,index:u+n,align:l,flicking:r})});if(f.length<=0)return[];i.resetPanelElementOrder(t),t.splice.apply(t,_([u,0],d(f))),i.insertPanelElements(f,c[0]||null),f.forEach(function(e){return e.resize()});var h=this._getPanelSizeSum(f);return c.forEach(function(e){e.increaseIndex(f.length),e.increasePosition(h)}),o.updateRange(),o.updateAnchors(),o.resetNeedPanelHistory(),a.updateInput(),this.render(),0<f.length&&!a.animating&&a.moveToPanel(a.activePanel||f[0],0).catch(function(){}),f},n.remove=function(e,n){void 0===n&&(n=1);var t=this._panels,i=this._elementManipulator,r=b(this._flicking,"Renderer"),o=r.camera,a=r.control,l=a.activePanel,s=P(e,t.length),u=t.slice(s+n),c=t.splice(s,n);if(c.length<=0)return[];i.resetPanelElementOrder(t);var f,h=this._getPanelSizeSum(c);return u.forEach(function(e){e.decreaseIndex(c.length),e.decreasePosition(h)}),i.removePanelElements(c),c.forEach(function(e){return e.destroy()}),o.updateRange(),o.updateAnchors(),o.resetNeedPanelHistory(),a.updateInput(),y(c,l)&&a.resetActivePanel(),this.render(),0<c.length&&!a.animating&&((f=y(c,l)?u[0]||t[t.length-1]:l)?a.moveToPanel(f,0).catch(function(){}):o.lookAt(0)),c},n.updatePanelSize=function(){return this._panels.forEach(function(e){return e.resize()}),this},n._collectPanels=function(){var t=b(this._flicking,"Renderer"),e=t.camera.element;this._elementManipulator.removeAllTextNodes(e);var i=this._getPanelAlign(),n=m(e.children);return this._panels=n.map(function(e,n){return new Pe({flicking:t,el:e,index:n,align:i})}),this},n._getPanelAlign=function(){var e=this._align;return"object"==typeof e?e.panel:e},n._getPanelSizeSum=function(e){var n=e[0],t=e[e.length-1],i=t.margin.next-n.margin.prev;return t.range.max-n.range.min+i},e}(),Oe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.render=function(){return this},n}(xe),Te=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}a(n,e);var t=n.prototype;return t.render=function(){var e=b(this._flicking,"Renderer"),n=e.camera,t=n.element,i=e.renderer.panels,r=n.visiblePanels,o=this._elementManipulator;if(i.length<=0||r.length<=0)return n.offset=0,this;var a=_([],d(i)).sort(function(e,n){return e.position+e.offset-(n.position+n.offset)}),l=_([],d(r)).sort(function(e,n){return e.position+e.offset-(n.position+n.offset)});o.removeAllChildNodes(t),o.insertPanelElements(l,null);var s=function(e,n){for(var t=0;t<e.length;t++)if(n(e[t]))return t;return-1}(a,function(e){return e.index===l[0].index}),u=a.slice(0,s),c=this._calcPanelRangeSize(u);return n.offset=c,this},t._calcPanelRangeSize=function(e){return e.reduce(function(e,n){return e+n.sizeIncludingMargin},0)},n}(Oe),we={__proto__:null,Renderer:xe,RawRenderer:Oe,VisibleRenderer:Te},Ce=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}a(n,e);var t=n.prototype;return t.insertPanelElements=function(e,n){var t=b(this._flicking,"Renderer").camera.element,i=(null==n?void 0:n.element)||null,r=document.createDocumentFragment();return e.forEach(function(e){return r.appendChild(e.element)}),t.insertBefore(r,i),this},t.movePanelElementsToStart=function(e){var n=b(this._flicking,"Renderer").camera,t=n.element,i=n.rangeDiff,r=e.map(function(e){return e.element}),o=y(r,t.firstElementChild)?null:t.firstElementChild;return this._relocatePanelElements(e,o),e.forEach(function(e){e.decreaseOffset(i)}),this},t.movePanelElementsToEnd=function(e){var n=b(this._flicking,"Renderer").camera.rangeDiff;return this._relocatePanelElements(e,null),e.forEach(function(e){e.increaseOffset(n)}),this},t.resetPanelElementOrder=function(e){var n=b(this._flicking,"Renderer").camera.element;return this._relocatePanelElements(e.filter(function(e){return e.element.parentElement===n}),null),e.forEach(function(e){e.resetOffset()}),this},t.removePanelElements=function(e){var n=b(this._flicking,"Renderer").camera.element;return e.forEach(function(e){n.removeChild(e.element)}),this},t.removeAllChildNodes=function(e){for(;e.firstChild;)e.removeChild(e.firstChild);return this},t.removeAllTextNodes=function(n){return n.childNodes.forEach(function(e){e.nodeType===Node.TEXT_NODE&&n.removeChild(e)}),this},t._relocatePanelElements=function(e,n){var t=b(this._flicking,"Renderer").camera.element,i=document.createDocumentFragment();e.forEach(function(e){return i.appendChild(e.element)}),t.insertBefore(i,n)},n}(ye),Ae=function(i){function e(){return null!==i&&i.apply(this,arguments)||this}a(e,i);var n=e.prototype;return n.movePanelElementsToStart=function(e,t){var n=b(this._flicking,"Renderer");return n.circular&&!n.renderOnlyVisible&&e.forEach(function(e,n){t[n].toggled?e.element.style.order="-1":e.element.style.order="0"}),i.prototype.movePanelElementsToStart.call(this,e,t)},n.movePanelElementsToEnd=function(e,t){var n=b(this._flicking,"Renderer");return n.circular&&!n.renderOnlyVisible&&e.forEach(function(e,n){t[n].toggled?e.element.style.order="1":e.element.style.order="0"}),i.prototype.movePanelElementsToEnd.call(this,e,t)},n.resetPanelElementOrder=function(e){var n=b(this._flicking,"Renderer");return n.circular&&!n.renderOnlyVisible&&e.forEach(function(e){e.element.style.order="0"}),i.prototype.resetPanelElementOrder.call(this,e)},e}(ye),Ie=function(K){function e(e,n){var t=void 0===n?{}:n,i=t.align,r=void 0===i?re.CENTER:i,o=t.defaultIndex,a=void 0===o?0:o,l=t.horizontal,s=void 0===l||l,u=t.circular,c=void 0!==u&&u,f=t.bound,h=void 0!==f&&f,d=t.adaptive,g=void 0!==d&&d,p=t.needPanelThreshold,_=void 0===p?0:p,m=t.deceleration,v=void 0===m?.0075:m,b=t.duration,E=void 0===b?500:b,P=t.easing,y=void 0===P?function(e){return 1-Math.pow(1-e,3)}:P,x=t.inputType,O=void 0===x?["mouse","touch"]:x,T=t.moveType,w=void 0===T?"snap":T,C=t.threshold,A=void 0===C?40:C,I=t.interruptable,R=void 0===I||I,k=t.bounce,S=void 0===k?"20%":k,j=t.iOSEdgeSwipeThreshold,N=void 0===j?30:j,z=t.isEqualSize,D=void 0!==z&&z,M=t.isConstantSize,L=void 0!==M&&M,V=t.renderOnlyVisible,H=void 0!==V&&V,G=t.autoInit,F=void 0===G||G,B=t.autoResize,X=void 0===B||B,q=t.renderExternal,Y=void 0!==q&&q,Z=t.useOffsetManipulator,W=void 0!==Z&&Z,J=K.call(this)||this;return J.resize=function(){var e=J._viewport,n=J._renderer,t=J._camera,i=J._control,r=e.width,o=e.height;J.trigger(new Q.ComponentEvent(ie.BEFORE_RESIZE,{width:r,height:o,element:e.element})),e.resize(),n.updatePanelSize(),n.elementManipulator.resetPanelElementOrder(n.panels),t.updateAlignPos(),t.updateRange(),t.updateAnchors(),i.updateInput();var a=e.width,l=e.height,s=a!==r||l!==o;return J.trigger(new Q.ComponentEvent(ie.AFTER_RESIZE,{width:e.width,height:e.height,prev:{width:r,height:o},sizeChanged:s,element:e.element})),J},J._initialized=!1,J._align=r,J._defaultIndex=a,J._horizontal=s,J._circular=c,J._bound=h,J._adaptive=g,J._needPanelThreshold=_,J._deceleration=v,J._duration=E,J._easing=y,J._inputType=O,J._moveType=w,J._threshold=A,J._interruptable=R,J._bounce=S,J._iOSEdgeSwipeThreshold=N,J._isEqualSize=D,J._isConstantSize=L,J._renderOnlyVisible=H,J._autoResize=X,J._autoInit=F,J._renderExternal=Y,J._useOffsetManipulator=W,J._viewport=new ae(function(e,n){var t=null;if(oe(e)){var i=(n||document).querySelector(e);if(!i)throw new U(te(e),ee);t=i}else e&&e.nodeType===Node.ELEMENT_NODE&&(t=e);if(!t)throw new U(ne(e,["HTMLElement","string"]),$);return t}(e)),J._renderer=J._createRenderer(),J._camera=J._createCamera(),J._control=J._createControl(),J._contentsReadyChecker=null,J._autoInit&&J.init(),J}a(e,K);var n=e.prototype;return Object.defineProperty(n,"control",{get:function(){return this._control},enumerable:!1,configurable:!0}),Object.defineProperty(n,"camera",{get:function(){return this._camera},enumerable:!1,configurable:!0}),Object.defineProperty(n,"renderer",{get:function(){return this._renderer},enumerable:!1,configurable:!0}),Object.defineProperty(n,"viewport",{get:function(){return this._viewport},enumerable:!1,configurable:!0}),Object.defineProperty(n,"initialized",{get:function(){return this._initialized},enumerable:!1,configurable:!0}),Object.defineProperty(n,"circularEnabled",{get:function(){return this._camera.controlParams.circular},enumerable:!1,configurable:!0}),Object.defineProperty(n,"index",{get:function(){return this._control.activeIndex},enumerable:!1,configurable:!0}),Object.defineProperty(n,"element",{get:function(){return this._viewport.element},enumerable:!1,configurable:!0}),Object.defineProperty(n,"currentPanel",{get:function(){return this._control.activePanel},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panels",{get:function(){return this._renderer.panels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panelCount",{get:function(){return this._renderer.panelCount},enumerable:!1,configurable:!0}),Object.defineProperty(n,"visiblePanels",{get:function(){return this._camera.visiblePanels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"animating",{get:function(){return this._control.animating},enumerable:!1,configurable:!0}),Object.defineProperty(n,"holding",{get:function(){return this._control.holding},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e,this._renderer.align=e,this._camera.align=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"defaultIndex",{get:function(){return this._defaultIndex},set:function(e){this._defaultIndex=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"horizontal",{get:function(){return this._horizontal},set:function(e){this._horizontal=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"circular",{get:function(){return this._circular},set:function(e){this._circular=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"bound",{get:function(){return this._bound},set:function(e){this._bound=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"adaptive",{get:function(){return this._adaptive},set:function(e){this._adaptive=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"needPanelThreshold",{get:function(){return this._needPanelThreshold},enumerable:!1,configurable:!0}),Object.defineProperty(n,"deceleration",{get:function(){return this._deceleration},set:function(e){this._deceleration=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"easing",{get:function(){return this._easing},set:function(e){this._easing=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"duration",{get:function(){return this._duration},set:function(e){this._duration=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"inputType",{get:function(){return this._inputType},set:function(e){this._inputType=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"moveType",{get:function(){return this._moveType},set:function(e){this._moveType=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"threshold",{get:function(){return this._threshold},set:function(e){this._threshold=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"interruptable",{get:function(){return this._interruptable},set:function(e){this._interruptable=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"bounce",{get:function(){return this._bounce},set:function(e){this._bounce=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"iOSEdgeSwipeThreshold",{get:function(){return this._iOSEdgeSwipeThreshold},set:function(e){this._iOSEdgeSwipeThreshold=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"isEqualSize",{get:function(){return this._isEqualSize},set:function(e){this._isEqualSize=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"isConstantSize",{get:function(){return this._isConstantSize},set:function(e){this._isConstantSize=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"renderOnlyVisible",{get:function(){return this._renderOnlyVisible},set:function(e){this._renderOnlyVisible=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"autoInit",{get:function(){return this._autoInit},set:function(e){this._autoInit=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"autoResize",{get:function(){return this._autoResize},set:function(e){this._autoResize=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"renderExternal",{get:function(){return this._renderExternal},enumerable:!1,configurable:!0}),Object.defineProperty(n,"useOffsetManipulator",{get:function(){return this._useOffsetManipulator},enumerable:!1,configurable:!0}),n.init=function(){if(this._initialized)return this;var e=this._camera,n=this._renderer,t=this._control;return e.init(this),n.init(this),t.init(this),this.resize(),this._moveToInitialPanel(),this._autoResize&&window.addEventListener("resize",this.resize),this._initialized=!0,this.trigger(new Q.ComponentEvent(ie.READY)),this},n.destroy=function(){var e;this._initialized&&(this.off(),window.removeEventListener("resize",this.resize),this._control.destroy(),this._camera.destroy(),this._renderer.destroy(),this._viewport.destroy(),null!==(e=this._contentsReadyChecker)&&void 0!==e&&e.destroy(),this._initialized=!1)},n.prev=function(e){var n,t,i;return void 0===e&&(e=this._duration),this.moveTo(null!==(i=null===(t=null===(n=this._control.activePanel)||void 0===n?void 0:n.prev())||void 0===t?void 0:t.index)&&void 0!==i?i:-1,e)},n.next=function(e){var n,t,i;return void 0===e&&(e=this._duration),this.moveTo(null!==(i=null===(t=null===(n=this._control.activePanel)||void 0===n?void 0:n.next())||void 0===t?void 0:t.index)&&void 0!==i?i:this._renderer.panelCount,e)},n.moveTo=function(e,n){void 0===n&&(n=this._duration);var t=this._renderer,i=t.panelCount,r=t.getPanel(e);return r?this._control.animating?Promise.reject(new U(V,I)):this._control.moveToPanel(r,n):Promise.reject(new U(N(e,0,i-1),O))},n.getPanel=function(e){return this._renderer.getPanel(e)},n.enableInput=function(){var e;return null!==(e=this._control.controller)&&void 0!==e&&e.enable(),this},n.disableInput=function(){var e;return null!==(e=this._control.controller)&&void 0!==e&&e.disable(),this},n.getStatus=function(){return{index:-1,panels:[],position:0}},n.setStatus=function(e){},n.addPlugins=function(e){return this},n.removePlugins=function(e){return this},n.append=function(e){return this.insert(this._renderer.panelCount,e)},n.prepend=function(e){return this.insert(0,e)},n.insert=function(e,n){if(this._renderExternal)throw new U(H,R);return this._renderer.insert(e,n)},n.remove=function(e,n){if(void 0===n&&(n=1),this._renderExternal)throw new U(H,R);return this._renderer.remove(e,n)},n._createControl=function(){var e=this._moveType,n=Object.keys(F).map(function(e){return F[e]});if(!y(n,e))throw new U(j("moveType",JSON.stringify(e)),h);switch(e){case F.SNAP:return new he;case F.FREE_SCROLL:return new de}},n._createCamera=function(){var e={align:this._align};return this._circular?(this._bound&&console.warn('"circular" and "bound" option cannot be used together, ignoring bound.'),new ve(e)):new(this._bound?be:me)(e)},n._createRenderer=function(){var e=new(this._useOffsetManipulator?Ae:this._renderExternal?ye:Ce),n={align:this._align,elementManipulator:e};return this._createActualRenderer(n)},n._createActualRenderer=function(e){return new(this._renderOnlyVisible?Te:Oe)(e)},n._moveToInitialPanel=function(){var e=this._renderer,n=this._control,t=e.getPanel(this._defaultIndex)||e.getPanel(0);t&&n.moveToPanel(t,0)},e.VERSION="4.0.0-beta.1",e}(Q);return e(Ie,{__proto__:null,Panel:Pe,Viewport:ae,FlickingError:U,AnchorPoint:pe}),e(Ie,Ee),e(Ie,ge),e(Ie,we),e(Ie,B),Ie});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("@egjs/component"),require("@egjs/axes")):"function"==typeof define&&define.amd?define(["@egjs/component","@egjs/axes"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).Flicking=n(e.eg.Component,e.eg.Axes)}(this,function(x,o){"use strict";var i=function(e,n){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])})(e,n)};function a(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function t(){this.constructor=e}i(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}var r=function(){return(r=Object.assign||function(e){for(var n,t=1,i=arguments.length;t<i;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)};function t(e,a,l,s){return new(l=l||Promise)(function(t,n){function i(e){try{o(s.next(e))}catch(e){n(e)}}function r(e){try{o(s.throw(e))}catch(e){n(e)}}function o(e){var n;e.done?t(e.value):((n=e.value)instanceof l?n:new l(function(e){e(n)})).then(i,r)}o((s=s.apply(e,a||[])).next())})}function f(t,i){var r,o,a,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},e={next:n(0),throw:n(1),return:n(2)};return"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function n(n){return function(e){return function(n){if(r)throw new TypeError("Generator is already executing.");for(;l;)try{if(r=1,o&&(a=2&n[0]?o.return:n[0]?o.throw||((a=o.return)&&a.call(o),0):o.next)&&!(a=a.call(o,n[1])).done)return a;switch(o=0,(n=a?[2&n[0],a.value]:n)[0]){case 0:case 1:a=n;break;case 4:return l.label++,{value:n[1],done:!1};case 5:l.label++,o=n[1],n=[0];continue;case 7:n=l.ops.pop(),l.trys.pop();continue;default:if(!(a=0<(a=l.trys).length&&a[a.length-1])&&(6===n[0]||2===n[0])){l=0;continue}if(3===n[0]&&(!a||n[1]>a[0]&&n[1]<a[3])){l.label=n[1];break}if(6===n[0]&&l.label<a[1]){l.label=a[1],a=n;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(n);break}a[2]&&l.ops.pop(),l.trys.pop();continue}n=i.call(t,l)}catch(e){n=[6,e],o=0}finally{r=a=0}if(5&n[0])throw n[1];return{value:n[0]?n[1]:void 0,done:!0}}([n,e])}}}function c(e){var n="function"==typeof Symbol&&Symbol.iterator,t=n&&e[n],i=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return{value:(e=e&&i>=e.length?void 0:e)&&e[i++],done:!e}}};throw new TypeError(n?"Object is not iterable.":"Symbol.iterator is not defined.")}function h(e,n){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var i,r,o=t.call(e),a=[];try{for(;(void 0===n||0<n--)&&!(i=o.next()).done;)a.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(t=o.return)&&t.call(o)}finally{if(r)throw r.error}}return a}function d(e,n){for(var t=0,i=n.length,r=e.length;t<i;t++,r++)e[r]=n[t];return e}function e(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.forEach(function(n){Object.keys(n).forEach(function(e){t[e]=n[e]})}),t}function l(e,n,t){return Math.max(Math.min(e,t),n)}function b(e,n){if(!e)throw new A(y(n),N.NOT_ATTACHED_TO_FLICKING);return e}function g(e){return[].slice.call(e)}function p(e){return Boolean(e)&&e.constructor===Array}function s(e,n){var t;if(H(e))switch(e){case M.PREV:t=0;break;case M.CENTER:t=.5*n;break;case M.NEXT:t=n;break;default:if(null==(t=V(e,n)))throw new A(O("align",e),N.WRONG_OPTION)}else t=e;return t}function u(e){return H(e)?e:e+"px"}function _(e,n){return e===n?z.NONE:e<n?z.NEXT:z.PREV}function m(e,n){return l(e<0?e+n:e,0,n)}function v(e,n){var t,i;try{for(var r=c(e),o=r.next();!o.done;o=r.next())if(o.value===n)return 1}catch(e){t={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}}var E,A=function(i){function r(e,n){var t=i.call(this,e)||this;return t.message=e,t.code=n,Object.setPrototypeOf(t,r.prototype),t.name="FlickingError",t}return a(r,i),r}(Error),N={WRONG_TYPE:0,ELEMENT_NOT_FOUND:1,VAL_MUST_NOT_NULL:2,NOT_ATTACHED_TO_FLICKING:3,WRONG_OPTION:4,INDEX_OUT_OF_RANGE:5,POSITION_NOT_REACHABLE:6,TRANSFORM_NOT_SUPPORTED:7,STOP_CALLED_BY_USER:8,ANIMATION_INTERRUPTED:9,ANIMATION_ALREADY_PLAYING:10,NOT_ALLOWED_IN_FRAMEWORK:11},C=function(e,n){return e+"("+typeof e+") is not a "+n.map(function(e){return'"'+e+'"'}).join(" or ")+"."},w=function(e){return'Element with selector "'+e+'" not found.'},P=function(e,n){return n+" should be provided. Given: "+e},y=function(e){return e+' is not attached to the Flicking instance. "init()" should be called first.'},O=function(e,n){return'Option "'+e+'" is not in correct format, given: '+n},I=function(e,n,t){return'Index "'+e+'" is out of range: should be between '+n+" and "+t+"."},T=function(e){return'Position "'+e+'" is not reachable.'},R="Browser does not support CSS transform",k="Event stop() is called by user",S="Animation is interrupted by user input",D="Animation is already playing",j="This behavior is not allowed in the frameworks like React, Vue, or Angular",L={READY:"ready",BEFORE_RESIZE:"beforeResize",AFTER_RESIZE:"afterResize",HOLD_START:"holdStart",HOLD_END:"holdEnd",MOVE_START:"moveStart",MOVE:"move",MOVE_END:"moveEnd",WILL_CHANGE:"willChange",CHANGED:"changed",WILL_RESTORE:"willRestore",RESTORED:"restored",SELECT:"select",NEED_PANEL:"needPanel",VISIBLE_CHANGE:"visibleChange",REACH_EDGE:"reachEdge"},M={PREV:"prev",CENTER:"center",NEXT:"next"},z={PREV:"PREV",NEXT:"NEXT",NONE:null},G={SNAP:"snap",FREE_SCROLL:"freeScroll"},n={__proto__:null,EVENTS:L,ALIGN:M,DIRECTION:z,MOVE_TYPE:G,ERROR_CODE:N},V=function(e,n){var t=/(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;if("number"==typeof e)return e;for(var i=0,r=0,o=t.exec(e);null!=o;){var a=o[1],l=o[2],s=o[3],l=parseFloat(l);if(!(a=i<=0?a||"+":a))return null;"%"===s&&(l=l/100*n),r+="+"===a?l:-l,++i,o=t.exec(e)}return 0===i?null:r},H=function(e){return"string"==typeof e},F=function(){function e(e){this._el=e,this._width=0,this._height=0}var n=e.prototype;return Object.defineProperty(n,"element",{get:function(){return this._el},enumerable:!1,configurable:!0}),Object.defineProperty(n,"width",{get:function(){return this._width},enumerable:!1,configurable:!0}),Object.defineProperty(n,"height",{get:function(){return this._height},enumerable:!1,configurable:!0}),n.setSize=function(e){var n=e.width,t=e.height,e=this._el;null!=n&&(e.style.width=u(n)),null!=t&&(e.style.height=u(t)),this.resize()},n.resize=function(){var e=this._el;this._width=e.offsetWidth,this._height=e.offsetHeight},e}();(re=E=E||{})[re.IDLE=0]="IDLE",re[re.HOLDING=1]="HOLDING",re[re.DRAGGING=2]="DRAGGING",re[re.ANIMATING=3]="ANIMATING",re[re.DISABLED=4]="DISABLED";var B=function(){function e(){}var n=e.prototype;return n.onHold=function(e){},n.onChange=function(e){},n.onRelease=function(e){},n.onAnimationEnd=function(e){},n.onFinish=function(e){},e}(),W=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!1,e.animating=!1,e}a(e,n);var t=e.prototype;return t.onHold=function(e){var n=e.flicking,t=e.axesEvent,e=e.transitTo;n.renderer.panelCount<=0?e(E.DISABLED):(t=new x.ComponentEvent(L.HOLD_START,{axesEvent:t}),n.trigger(t),t.isCanceled()?e(E.DISABLED):e(E.HOLDING))},t.onChange=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo,r=n.control.controller.animatingContext,t=new x.ComponentEvent(L.MOVE_START,{isTrusted:t.isTrusted,holding:this.holding,direction:_(r.start,r.end),axesEvent:t});n.trigger(t),t.isCanceled()?i(E.DISABLED):i(E.ANIMATING).onChange(e)},e}(B),X=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!0,e.animating=!1,e._releaseEvent=null,e}a(e,n);var t=e.prototype;return t.onChange=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo,r=t.inputEvent,r=n.horizontal?r.offsetX:r.offsetY,t=new x.ComponentEvent(L.MOVE_START,{isTrusted:t.isTrusted,holding:this.holding,direction:_(0,-r),axesEvent:t});n.trigger(t),t.isCanceled()?i(E.DISABLED):i(E.DRAGGING).onChange(e)},t.onRelease=function(e){var n=e.flicking,t=e.axesEvent,e=e.transitTo;if(n.trigger(new x.ComponentEvent(L.HOLD_END,{axesEvent:t})),0!==t.delta.flick)return t.setTo({flick:n.camera.position},0),void e(E.IDLE);this._releaseEvent=t},t.onFinish=function(e){var n=e.flicking;if((0,e.transitTo)(E.IDLE),this._releaseEvent){var t,i=this._releaseEvent.inputEvent.srcEvent;t="touchend"===i.type?(e=i.changedTouches[0],document.elementFromPoint(e.clientX,e.clientY)):i.target;var r,o,i=n.renderer.panels,a=null;try{for(var l=c(i),s=l.next();!s.done;s=l.next()){var u=s.value;if(u.contains(t)){a=u;break}}}catch(e){o={error:e}}finally{try{s&&!s.done&&(r=l.return)&&r.call(l)}finally{if(o)throw o.error}}a&&(r=n.camera.position,o=a.position,n.trigger(new x.ComponentEvent(L.SELECT,{index:a.index,panel:a,direction:_(r,o)})))}},e}(B),U={HOLD:"hold",CHANGE:"change",RELEASE:"release",ANIMATION_END:"animationEnd",FINISH:"finish"},Y="flick",K=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!0,e.animating=!0,e}a(e,n);var t=e.prototype;return t.onChange=function(e){var n,t=e.flicking,i=e.axesEvent,r=e.transitTo;i.delta[Y]&&(e=(n=t.camera).position,n.lookAt(i.pos[Y]),i=new x.ComponentEvent(L.MOVE,{isTrusted:i.isTrusted,holding:this.holding,direction:_(0,i.delta[Y]),axesEvent:i}),t.trigger(i),i.isCanceled()&&(n.lookAt(e),r(E.DISABLED)))},t.onRelease=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo;n.trigger(new x.ComponentEvent(L.HOLD_END,{axesEvent:t})),n.renderer.panelCount<=0?i(E.IDLE):(i(E.ANIMATING),e=n.control,i=t.destPos[Y],n=Math.max(t.duration,n.duration),e.moveToPosition(i,n,t))},e}(B),Z=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!1,e.animating=!0,e}a(e,n);var t=e.prototype;return t.onHold=function(e){var n=e.flicking,t=e.axesEvent,e=e.transitTo,t=new x.ComponentEvent(L.HOLD_START,{axesEvent:t});n.trigger(t),t.isCanceled()?e(E.DISABLED):e(E.DRAGGING)},t.onChange=function(e){var n,t=e.flicking,i=e.axesEvent,r=e.transitTo;i.delta.flick&&(e=(n=t.camera).position,n.lookAt(i.pos.flick),i=new x.ComponentEvent(L.MOVE,{isTrusted:i.isTrusted,holding:this.holding,direction:_(0,i.delta.flick),axesEvent:i}),t.trigger(i),i.isCanceled()&&(t.camera.lookAt(e),r(E.DISABLED)))},t.onFinish=function(e){var n=e.flicking,t=e.axesEvent,i=e.transitTo,e=n.camera,e=e.findAnchorIncludePosition(e.position);n.horizontal&&n.adaptive&&e&&n.viewport.setSize({height:e.panel.height}),i(E.IDLE);i=n.control.controller.animatingContext;n.trigger(new x.ComponentEvent(L.MOVE_END,{isTrusted:t.isTrusted,direction:_(i.start,i.end),axesEvent:t}))},e}(B),q=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.holding=!1,e.animating=!0,e}a(e,n);var t=e.prototype;return t.onAnimationEnd=function(e){(0,e.transitTo)(E.IDLE)},t.onChange=function(e){var n=e.axesEvent,e=e.transitTo;n.stop(),e(E.IDLE)},t.onRelease=function(e){var n=e.axesEvent,e=e.transitTo;0===n.delta.flick&&e(E.IDLE)},e}(B),J=function(){function e(){var t=this;this.transitTo=function(e){var n;switch(e){case E.IDLE:n=new W;break;case E.HOLDING:n=new X;break;case E.DRAGGING:n=new K;break;case E.ANIMATING:n=new Z;break;case E.DISABLED:n=new q}return t._state=n,t._state},this._state=new W}var n=e.prototype;return Object.defineProperty(n,"state",{get:function(){return this._state},enumerable:!1,configurable:!0}),n.fire=function(e,n){var t=this._state,i=r(r({},n),{transitTo:this.transitTo});switch(e){case U.HOLD:t.onHold(i);break;case U.CHANGE:t.onChange(i);break;case U.RELEASE:t.onRelease(i);break;case U.ANIMATION_END:t.onAnimationEnd(i);break;case U.FINISH:t.onFinish(i)}},e}(),Q=function(){function e(){this._resetInternalValues(),this._stateMachine=new J}var n=e.prototype;return Object.defineProperty(n,"axes",{get:function(){return this._axes},enumerable:!1,configurable:!0}),Object.defineProperty(n,"state",{get:function(){return this._stateMachine.state},enumerable:!1,configurable:!0}),Object.defineProperty(n,"animatingContext",{get:function(){return this._animatingContext},enumerable:!1,configurable:!0}),Object.defineProperty(n,"enabled",{get:function(){var e;return null!==(e=null===(e=this._panInput)||void 0===e?void 0:e.isEnable())&&void 0!==e&&e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){var e;return null!==(e=null===(e=this._axes)||void 0===e?void 0:e.get([Y])[Y])&&void 0!==e?e:0},enumerable:!1,configurable:!0}),n.init=function(t){var e,i=this;this._flicking=t,this._axes=new o(((e={})[Y]={range:[0,0],circular:!1,bounce:[0,0]},e),{deceleration:t.deceleration,interruptable:t.interruptable,easing:t.easing}),this._panInput=new o.PanInput(t.viewport.element,{inputType:t.inputType,iOSEdgeSwipeThreshold:t.iOSEdgeSwipeThreshold,scale:t.horizontal?[-1,0]:[0,-1]});var r=this._axes;r.connect(t.horizontal?[Y,""]:["",Y],this._panInput);for(var n in U)!function(e){var n=U[e];r.on(n,function(e){i._stateMachine.fire(n,{flicking:t,axesEvent:e})})}(n);return this},n.destroy=function(){var e;return null!==(e=this._axes)&&void 0!==e&&e.destroy(),null!==(e=this._panInput)&&void 0!==e&&e.destroy(),this._resetInternalValues(),this},n.enable=function(){var e;return null!==(e=this._panInput)&&void 0!==e&&e.enable(),this},n.disable=function(){var e;return null!==(e=this._panInput)&&void 0!==e&&e.disable(),this},n.update=function(){var n,t,e=b(this._flicking,"Control"),i=e.camera,r=this._axes,o=i.controlParams,a=r.axis[Y];return a.circular=[o.circular,o.circular],a.range=[o.range.min,o.range.max],a.bounce=(n=e.bounce,t=i.size,(p(n)?n.map(function(e){return V(e,t)}):[i=V(n,t),i]).map(function(e){if(null==e)throw new A(O("bounce",n),N.WRONG_OPTION);return e})),r.axm.set(((r={})[Y]=o.position,r)),this},n.animateTo=function(n,t,r){var i=this,o=this._axes;if(!o)return Promise.reject(new A(y("Control"),N.NOT_ATTACHED_TO_FLICKING));var e=o.get([Y])[Y];if(e===n)return b(this._flicking,"Control").camera.lookAt(n),Promise.resolve();this._animatingContext={start:e,end:n,offset:0};function a(){var e;o.once(U.FINISH,function(){i._animatingContext={start:0,end:0,offset:0}}),r?r.setTo(((e={})[Y]=n,e),t):o.setTo(((e={})[Y]=n,e),t)}return 0===t?(a(),o.axm.set(((e={})[Y]=n,e)),Promise.resolve()):new Promise(function(e,n){function t(){o.off(U.HOLD,i),e()}var i=function(){o.off(U.FINISH,t),n(new A(S,N.ANIMATION_INTERRUPTED))};o.once(U.FINISH,t),r||o.once(U.HOLD,i),a()})},n._resetInternalValues=function(){this._flicking=null,this._axes=null,this._panInput=null,this._animatingContext={start:0,end:0,offset:0}},e}(),$=function(){function e(){var o=this;this._setActivePanel=function(e,n,t){var i,r=b(o._flicking,"Control");(o._activePanel=e)!==n?r.trigger(new x.ComponentEvent(L.CHANGED,{index:e.index,panel:e,prevIndex:null!==(i=null==n?void 0:n.index)&&void 0!==i?i:-1,prevPanel:n,isTrusted:t,direction:n?_(n.position,e.position):z.NONE})):r.trigger(new x.ComponentEvent(L.RESTORED,{isTrusted:t}))},this._flicking=null,this._controller=new Q,this._activePanel=null}var n=e.prototype;return Object.defineProperty(n,"controller",{get:function(){return this._controller},enumerable:!1,configurable:!0}),Object.defineProperty(n,"activeIndex",{get:function(){var e;return null!==(e=null===(e=this._activePanel)||void 0===e?void 0:e.index)&&void 0!==e?e:-1},enumerable:!1,configurable:!0}),Object.defineProperty(n,"activePanel",{get:function(){return this._activePanel},enumerable:!1,configurable:!0}),Object.defineProperty(n,"animating",{get:function(){return this._controller.state.animating},enumerable:!1,configurable:!0}),Object.defineProperty(n,"holding",{get:function(){return this._controller.state.holding},enumerable:!1,configurable:!0}),n.init=function(e){return this._flicking=e,this._controller.init(e),this},n.destroy=function(){this._controller.destroy(),this._flicking=null,this._activePanel=null},n.enable=function(){return this._controller.enable(),this},n.disable=function(){return this._controller.disable(),this},n.updateInput=function(){return this._controller.update(),this},n.resetActivePanel=function(){return this._activePanel=null,this},n.moveToPanel=function(o,e){var a=e.duration,n=e.direction,l=void 0===n?z.NONE:n,s=e.axesEvent;return t(this,void 0,void 0,function(){var n,t,i,r;return f(this,function(e){if(r=b(this._flicking,"Control"),t=r.camera,n=o.position,t.canReach(o))t.controlParams.circular&&(i=this._controller.position,r=t.rangeDiff,n=[n,n+r,n-r].filter(function(e){return l===z.NONE||(l===z.PREV?e<=i:i<=e)}).reduce(function(e,n){return Math.abs(i-n)<Math.abs(i-e)?n:e},1/0));else{if(t=t.findNearestAnchor(n),o.removed||!t)return[2,Promise.reject(new A(T(o.position),N.POSITION_NOT_REACHABLE))];n=t.position,o=t.panel}return this._triggerIndexChangeEvent(o,o.position,s),[2,this._animateToPosition({position:n,duration:a,newActivePanel:o,axesEvent:s})]})})},n._triggerIndexChangeEvent=function(e,n,t){var i=b(this._flicking,"Control"),r=e!==this._activePanel?L.WILL_CHANGE:L.WILL_RESTORE,o=i.camera,a=this._activePanel,n=new x.ComponentEvent(r,{index:e.index,panel:e,isTrusted:(null==t?void 0:t.isTrusted)||!1,direction:_(null!==(a=null==a?void 0:a.position)&&void 0!==a?a:o.position,n)});if(i.trigger(n),n.isCanceled())throw new A(k,N.STOP_CALLED_BY_USER)},n._animateToPosition=function(e){var o=e.position,a=e.duration,l=e.newActivePanel,s=e.axesEvent;return t(this,void 0,void 0,function(){var n,t,i,r=this;return f(this,function(e){return n=this._activePanel,t=function(){return r._controller.animateTo(o,a,s)},i=(null==s?void 0:s.isTrusted)||!1,0===a?(this._setActivePanel(l,n,i),[2,t()]):[2,t().then(function(){return r._setActivePanel(l,n,i)})]})})},e}(),ee=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.moveToPosition=function(s,u,c){return t(this,void 0,void 0,function(){var n,t,i,r,o,a,l;return f(this,function(e){return r=b(this._flicking,"Control"),o=r.camera,n=this._activePanel,i=o.clampToReachablePosition(s),(t=o.findNearestAnchor(i))&&n?(i=n.position,r=Math.abs(s-i)>=r.threshold,o=i<s?o.getNextAnchor(t):o.getPrevAnchor(t),r&&t.position!==n.position?(l=t.panel,a=t.position):r&&o?(l=o.panel,a=o.position):(a=n.position,l=n),this._triggerIndexChangeEvent(l,s,c),[2,this._animateToPosition({position:a,duration:u,newActivePanel:l,axesEvent:c})]):[2,Promise.reject(new A(T(s),N.POSITION_NOT_REACHABLE))]})})},n}($),ne=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.moveToPosition=function(i,r,o){return t(this,void 0,void 0,function(){var n,t;return f(this,function(e){return t=b(this._flicking,"Control"),n=t.camera,t=n.clampToReachablePosition(i),(t=n.findAnchorIncludePosition(t))?(t=t.panel,this._triggerIndexChangeEvent(t,i,o),[2,this._animateToPosition({position:i,duration:r,newActivePanel:t,axesEvent:o})]):[2,Promise.reject(new A(T(i),N.POSITION_NOT_REACHABLE))]})})},n}($),te={__proto__:null,Control:$,SnapControl:ee,FreeControl:ne,AxesController:Q,State:B,IdleState:W,HoldingState:X,DraggingState:K,AnimatingState:Z,DisabledState:q,StateMachine:J},ie=function(){function e(e){var n=e.index,t=e.position,e=e.panel;this._index=n,this._pos=t,this._panel=e}var n=e.prototype;return Object.defineProperty(n,"index",{get:function(){return this._index},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){return this._pos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panel",{get:function(){return this._panel},enumerable:!1,configurable:!0}),e}(),re=function(){function e(e){var l=this,e=(void 0===e?{}:e).align,e=void 0===e?M.CENTER:e;this._checkTranslateSupport=function(){var n,e,t=document.documentElement.style,i="";try{for(var r=c(["webkitTransform","msTransform","MozTransform","OTransform","transform"]),o=r.next();!o.done;o=r.next()){var a=o.value;a in t&&(i=a)}}catch(e){n={error:e}}finally{try{o&&!o.done&&(e=r.return)&&e.call(r)}finally{if(n)throw n.error}}if(!i)throw new A(R,N.TRANSFORM_NOT_SUPPORTED);l._transform=i},this._flicking=null,this._resetInternalValues(),this._align=e}var n=e.prototype;return Object.defineProperty(n,"element",{get:function(){return this._el},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){return this._position},enumerable:!1,configurable:!0}),Object.defineProperty(n,"alignPosition",{get:function(){return this._alignPos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"offset",{get:function(){return this._offset},set:function(e){this._offset=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"range",{get:function(){return this._range},enumerable:!1,configurable:!0}),Object.defineProperty(n,"rangeDiff",{get:function(){return this._range.max-this._range.min},enumerable:!1,configurable:!0}),Object.defineProperty(n,"visiblePanels",{get:function(){return this._visiblePanels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"visibleRange",{get:function(){return{min:this._position-this._alignPos,max:this._position-this._alignPos+this.size}},enumerable:!1,configurable:!0}),Object.defineProperty(n,"anchorPoints",{get:function(){return this._anchors},enumerable:!1,configurable:!0}),Object.defineProperty(n,"controlParams",{get:function(){return{range:this._range,position:this._position,circular:!1}},enumerable:!1,configurable:!0}),Object.defineProperty(n,"atEdge",{get:function(){return this._position<=this._range.min||this._position>=this._range.max},enumerable:!1,configurable:!0}),Object.defineProperty(n,"size",{get:function(){var e=this._flicking;return e?e.horizontal?e.viewport.width:e.viewport.height:0},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e},enumerable:!1,configurable:!0}),n.init=function(e){e=(this._flicking=e).viewport.element;return function(e,n){if(null==e)throw new A(P(e,n),N.VAL_MUST_NOT_NULL)}(e.firstElementChild,"First element child of the viewport element"),this._el=e.firstElementChild,this._checkTranslateSupport(),this},n.destroy=function(){return this._flicking=null,this._resetInternalValues(),this},n.lookAt=function(e){var n=this._position;return this._position=e,this._refreshVisiblePanels(),this._checkNeedPanel(),this._checkReachEnd(n,e),this._applyTransform(),this},n.getPrevAnchor=function(e){return this._anchors[e.index-1]||null},n.getNextAnchor=function(e){return this._anchors[e.index+1]||null},n.findAnchorIncludePosition=function(e){var n,t,i=this._anchors;try{for(var r=c(i),o=r.next();!o.done;o=r.next()){var a=o.value;if(a.panel.includePosition(e,!0))return a}}catch(e){n={error:e}}finally{try{o&&!o.done&&(t=r.return)&&t.call(r)}finally{if(n)throw n.error}}return null},n.findNearestAnchor=function(e){var n=this._anchors;if(n.length<=0)return null;for(var t=1/0,i=0;i<n.length;i++){var r=n[i],r=Math.abs(r.position-e);if(t<r)return n[i-1];t=r}return n[n.length-1]},n.clampToReachablePosition=function(e){var n=this._range;return l(e,n.min,n.max)},n.canReach=function(e){var n=this._range;if(e.removed)return!1;e=e.position;return e>=n.min&&e<=n.max},n.canSee=function(e){var n=this.visibleRange;return e.includeRange(n.min,n.max,!1)},n.updateAlignPos=function(){var e=this._align,e="object"==typeof e?e.camera:e;return this._alignPos=s(e,this.size),this},n.updateAnchors=function(){var e=b(this._flicking,"Camera").renderer.panels;return this._anchors=e.map(function(e,n){return new ie({index:n,position:e.position,panel:e})}),this},n.updatePosition=function(){var e=b(this._flicking,"Camera").control.activePanel;return e&&this.lookAt(e.position),this},n.resetNeedPanelHistory=function(){return this._needPanelTriggered={prev:!1,next:!1},this},n._resetInternalValues=function(){this._position=0,this._alignPos=0,this._offset=0,this._range={min:0,max:0},this._visiblePanels=[],this._anchors=[],this._needPanelTriggered={prev:!1,next:!1}},n._refreshVisiblePanels=function(){var n=this,e=b(this._flicking,"Camera"),t=e.renderer.panels.filter(function(e){return n.canSee(e)}),i=this._visiblePanels,r=(this._visiblePanels=t).filter(function(e){return!v(i,e)}),o=i.filter(function(e){return!v(t,e)});(0<r.length||0<o.length)&&(e.renderer.render(),e.trigger(new x.ComponentEvent(L.VISIBLE_CHANGE,{added:r,removed:o,visiblePanels:t})))},n._checkNeedPanel=function(){var e=this._needPanelTriggered;if(!e.prev||!e.next){var n=b(this._flicking,"Camera"),t=n.renderer.panels;if(t.length<=0)return e.prev||(n.trigger(new x.ComponentEvent(L.NEED_PANEL,{direction:z.PREV})),e.prev=!0),void(e.next||(n.trigger(new x.ComponentEvent(L.NEED_PANEL,{direction:z.NEXT})),e.next=!0));var i=this._position,r=this.size,o=this._range,a=n.needPanelThreshold,l=i-this._alignPos,s=l+r,r=t[0],t=t[t.length-1];e.prev||(l<=r.range.min+a||i<=o.min+a)&&(n.trigger(new x.ComponentEvent(L.NEED_PANEL,{direction:z.PREV})),e.prev=!0),e.next||(t.range.max-a<=s||i>=o.max-a)&&(n.trigger(new x.ComponentEvent(L.NEED_PANEL,{direction:z.NEXT})),e.next=!0)}},n._checkReachEnd=function(e,n){var t=b(this._flicking,"Camera"),i=this._range,r=e>i.min&&e<i.max,e=n>i.min&&n<i.max;r&&!e&&(i=n<=i.min?z.PREV:z.NEXT,t.trigger(new x.ComponentEvent(L.REACH_EDGE,{direction:i})))},n._applyTransform=function(){var e=this._el,n=b(this._flicking,"Camera"),t=this._position-this._alignPos-this._offset;e.style[this._transform]=n.horizontal?"translate("+-t+"px)":"translate(0, "+-t+"px)"},e}(),oe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.updateRange=function(){var e=b(this._flicking,"Camera").renderer,n=e.getPanel(0),e=e.getPanel(e.panelCount-1);return this._range={min:null!==(n=null==n?void 0:n.position)&&void 0!==n?n:0,max:null!==(e=null==e?void 0:e.position)&&void 0!==e?e:0},this},n}(re),ae=function(u){function e(){var e=null!==u&&u.apply(this,arguments)||this;return e._circularOffset=0,e._circularEnabled=!1,e._panelTooglePoints={},e}a(e,u);var n=e.prototype;return Object.defineProperty(n,"controlParams",{get:function(){return{range:this._range,position:this._position,circular:this._circularEnabled}},enumerable:!1,configurable:!0}),n.getPrevAnchor=function(e){if(!this._circularEnabled||0!==e.index)return u.prototype.getPrevAnchor.call(this,e);var n=this._anchors,e=this.rangeDiff,n=n[n.length-1];return new ie({index:n.index,position:n.position-e,panel:n.panel})},n.getNextAnchor=function(e){var n=this._anchors;if(!this._circularEnabled||e.index!==n.length-1)return u.prototype.getNextAnchor.call(this,e);e=this.rangeDiff,n=n[0];return new ie({index:n.index,position:n.position+e,panel:n.panel})},n.findAnchorIncludePosition=function(e){if(!this._circularEnabled)return u.prototype.findAnchorIncludePosition.call(this,e);var n,t,i=this._range,r=(o=e,n=i.min,t=i.max,r=t-n,o<n?o=t-(n-o)%r:t<o&&(o=n+(o-t)%r),o),o=u.prototype.findAnchorIncludePosition.call(this,r);if(!o)return null;var r=this.rangeDiff;if(e<i.min){var a=-Math.floor((i.min-e)/r)-1;return new ie({index:o.index,position:o.position+r*a,panel:o.panel})}if(e>i.max){a=Math.floor((e-i.max)/r)+1;return new ie({index:o.index,position:o.position+r*a,panel:o.panel})}return o},n.clampToReachablePosition=function(e){return this._circularEnabled?e:u.prototype.clampToReachablePosition.call(this,e)},n.canReach=function(e){return!e.removed&&(!!this._circularEnabled||u.prototype.canReach.call(this,e))},n.canSee=function(e){var n=this._range,t=this.rangeDiff,i=this.visibleRange,r=u.prototype.canSee.call(this,e);return this._circularEnabled?i.min<n.min?r||e.includeRange(i.min+t,i.max+t,!1):i.max>n.max?r||e.includeRange(i.min-t,i.max-t,!1):r:r},n.updateRange=function(){var e=b(this._flicking,"Camera").renderer,n=e.panels;if(n.length<=0)return this._resetInternalValues(),this;var a,l,s,u,c,f,h,d,g,p=this._position,t=n[0],i=n[n.length-1],r=t.range.min-t.margin.prev,o=i.range.max+i.margin.next,_=this.size,m=o-r,v=n.every(function(e){return m-e.size>=_});return v?(this._range={min:r,max:o},a={},l=this._alignPos,s=[],u=[],c=[],f=[],h=this._range,d=h.min-l,g=h.max-l+_,n.forEach(function(e){var n,t,i,r=e.includeRange(g-_,g,!1),o=e.includeRange(d,d+_,!1);r&&(n=e.range.max+h.min-h.max+l,a[n]=i={panel:e,direction:z.PREV,toggled:t=p<n},t&&(s.push(e),u.push(i))),o&&(t=(n=e.range.min+h.max-_+l)<p,a[n]=i={panel:e,direction:z.NEXT,toggled:!1},t&&(c.push(e),f.push(i)))}),e.elementManipulator.movePanelElementsToStart(s,u),e.elementManipulator.movePanelElementsToEnd(c,f),this._circularOffset=this._calcPanelAreaSum(s)-this._calcPanelAreaSum(c),this._panelTooglePoints=a):(this._range={min:t.position,max:i.position},this._circularOffset=0,this._panelTooglePoints={}),this._circularEnabled=v,this},n.lookAt=function(r){var o,a,e,n=b(this._flicking,"Camera"),l=this._position,s=this._panelTooglePoints,t=n.renderer.elementManipulator,i=Object.keys(s).map(function(e){return parseFloat(e)}).sort(function(e,n){return e-n});return r===l||(l<r?(o=[],e=i.reduce(function(e,n){var t=s[n],i=t.direction===z.NEXT&&!t.toggled||t.direction===z.PREV&&t.toggled;return l<=n&&n<=r&&i&&(t.toggled=!t.toggled,e.push(t.panel),o.push(t)),e},[]),t.movePanelElementsToEnd(e,o),this._circularOffset-=this._calcPanelAreaSum(e)):(a=[],e=i.reduce(function(e,n){var t=s[n],i=t.direction===z.NEXT&&t.toggled||t.direction===z.PREV&&!t.toggled;return n<=l&&r<=n&&i&&(t.toggled=!t.toggled,e.push(t.panel),a.push(t)),e},[]),t.movePanelElementsToStart(e,a),this._circularOffset+=this._calcPanelAreaSum(e)),n.renderer.render()),u.prototype.lookAt.call(this,r)},n._applyTransform=function(){var e=this._el,n=b(this._flicking,"Camera"),t=this._position-this._alignPos-this._offset+this._circularOffset;e.style[this._transform]=n.horizontal?"translate("+-t+"px)":"translate(0, "+-t+"px)"},n._resetInternalValues=function(){u.prototype._resetInternalValues.call(this),this._circularOffset=0,this._circularEnabled=!1,this._panelTooglePoints={}},n._calcPanelAreaSum=function(e){return e.reduce(function(e,n){return e+n.sizeIncludingMargin},0)},e}(re),le=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}a(n,e);var t=n.prototype;return t.updateRange=function(){var e=b(this._flicking,"Camera").renderer,n=this._alignPos,t=e.getPanel(0),i=e.getPanel(e.panelCount-1);if(!t||!i)return this._range={min:0,max:0},this;var r=this.size,o=t.range.min,e=i.range.max;return this._range=r<e-o?{min:o+n,max:e-r+n}:{min:t.position,max:i.position},this},t.updateAnchors=function(){var n=this,e=b(this._flicking,"Camera").renderer.panels;if(e.length<=0)return this._anchors=[],this;var t=this._range,i=e.filter(function(e){return n.canReach(e)}),r=i[0].position!==t.min,o=i[i.length-1].position!==t.max,a=r?1:0,i=i.map(function(e,n){return new ie({index:n+a,position:e.position,panel:e})});return r&&i.splice(0,0,new ie({index:0,position:t.min,panel:function(e,n){var t,i;try{for(var r=c(e),o=r.next();!o.done;o=r.next()){var a=o.value;if(n(a))return a}}catch(e){t={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}return null}(e,function(e){return e.includePosition(t.min)})})),o&&i.push(new ie({index:i.length,position:t.max,panel:function(e,n){for(var t=e.length-1;0<=t;t--){var i=e[t];if(n(i))return i}return null}(e,function(e){return e.includePosition(t.min)})})),this._anchors=i,this},n}(re),$={__proto__:null,Camera:re,LinearCamera:oe,CircularCamera:ae,BoundCamera:le},se=function(){function e(e){var n=e.el,t=e.index,i=e.align,e=e.flicking;this._el=n,this._index=t,this._flicking=e,this._align=i,this._removed=!1,this._resetInternalStates()}var n=e.prototype;return Object.defineProperty(n,"element",{get:function(){return this._el},enumerable:!1,configurable:!0}),Object.defineProperty(n,"index",{get:function(){return this._index},enumerable:!1,configurable:!0}),Object.defineProperty(n,"position",{get:function(){return this._pos+this._alignPos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"size",{get:function(){return this._size},enumerable:!1,configurable:!0}),Object.defineProperty(n,"sizeIncludingMargin",{get:function(){return this._size+this._margin.prev+this._margin.next},enumerable:!1,configurable:!0}),Object.defineProperty(n,"height",{get:function(){return this._height},enumerable:!1,configurable:!0}),Object.defineProperty(n,"margin",{get:function(){return this._margin},enumerable:!1,configurable:!0}),Object.defineProperty(n,"alignPosition",{get:function(){return this._alignPos},enumerable:!1,configurable:!0}),Object.defineProperty(n,"offset",{get:function(){return this._offset},enumerable:!1,configurable:!0}),Object.defineProperty(n,"removed",{get:function(){return this._removed},enumerable:!1,configurable:!0}),Object.defineProperty(n,"range",{get:function(){return{min:this._pos,max:this._pos+this._size}},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e},enumerable:!1,configurable:!0}),n.resize=function(){var e=this._el,n=window.getComputedStyle(e)||e.currentStyle,t=this._flicking,i=t.horizontal,t=t.renderer.panels[this._index-1];return this._size=i?e.offsetWidth:e.offsetHeight,this._margin=i?{prev:parseFloat(n.marginLeft),next:parseFloat(n.marginRight)}:{prev:parseFloat(n.marginTop),next:parseFloat(n.marginBottom)},this._pos=t?t.range.max+t.margin.next+this._margin.prev:this._margin.prev,this._height=i?e.offsetHeight:this._size,this._updateAlignPos(),this},n.contains=function(e){return this._el.contains(e)},n.destroy=function(){this._resetInternalStates(),this._removed=!0},n.includePosition=function(e,n){return this.includeRange(e,e,n=void 0===n?!1:n)},n.includeRange=function(e,n,t){var i=this._margin,r=this.range;return(t=void 0===t?!1:t)&&(r.min-=i.prev,r.max+=i.next),n>=r.min&&e<=r.max},n.focus=function(e){return this._flicking.moveTo(this._index,e)},n.prev=function(){var e=this._index,n=this._flicking,t=n.renderer,i=t.panelCount;return 1===i?null:n.circularEnabled?t.getPanel(0===e?i-1:e-1):t.getPanel(e-1)},n.next=function(){var e=this._index,n=this._flicking,t=n.renderer,i=t.panelCount;return 1===i?null:n.circularEnabled?t.getPanel(e===i-1?0:e+1):t.getPanel(e+1)},n.increaseIndex=function(e){return this._index+=Math.max(e,0),this},n.decreaseIndex=function(e){return this._index-=Math.max(e,0),this},n.increasePosition=function(e){return this._moveBy(Math.max(e,0)),this},n.decreasePosition=function(e){return this._moveBy(-Math.max(e,0)),this},n.increaseOffset=function(e){return this._offset+=Math.max(e,0),this},n.decreaseOffset=function(e){return this._offset-=Math.max(e,0),this},n.resetOffset=function(){return this._offset=0,this},n._moveBy=function(e){return this._pos+=e,this},n._updateAlignPos=function(){this._alignPos=s(this._align,this._size)},n._resetInternalStates=function(){this._size=0,this._pos=0,this._margin={prev:0,next:0},this._height=0,this._alignPos=0,this._offset=0},e}(),ue=function(n){function e(){var e=n.call(this)||this;return e._flicking=null,e}a(e,n);var t=e.prototype;return t.init=function(e){this._flicking=e},t.destroy=function(){this._flicking=null},t.insertPanelElements=function(e,n){return this},t.movePanelElementsToStart=function(e,n){var t=b(this._flicking,"Renderer").camera.rangeDiff;return e.forEach(function(e,n){e.decreaseOffset(t)}),0<e.length&&this.trigger("orderChanged"),this},t.movePanelElementsToEnd=function(e,n){var t=b(this._flicking,"Renderer").camera.rangeDiff;return e.forEach(function(e,n){e.increaseOffset(t)}),0<e.length&&this.trigger("orderChanged"),this},t.resetPanelElementOrder=function(e){return e.forEach(function(e){e.resetOffset()}),0<e.length&&this.trigger("orderChanged"),this},t.removePanelElements=function(e){return this},t.removeAllChildNodes=function(e){return this},t.removeAllTextNodes=function(e){return this},e}(x),B=function(){function e(e){var n=void 0===e?{}:e,e=n.align,e=void 0===e?M.CENTER:e,n=n.elementManipulator,n=void 0===n?new ue:n;this._align=e,this._flicking=null,this._elementManipulator=n,this._panels=[]}var n=e.prototype;return Object.defineProperty(n,"panels",{get:function(){return this._panels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panelCount",{get:function(){return this._panels.length},enumerable:!1,configurable:!0}),Object.defineProperty(n,"elementManipulator",{get:function(){return this._elementManipulator},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e;var n=this._getPanelAlign();this._panels.forEach(function(e){e.align=n})},enumerable:!1,configurable:!0}),n.init=function(e){return this._flicking=e,this._elementManipulator.init(e),this._collectPanels(),this},n.destroy=function(){this._flicking=null,this._panels=[],this._elementManipulator.destroy()},n.getPanel=function(e){return this._panels[e]||null},n.insert=function(e,n){var t=this._panels,i=this._elementManipulator,r=b(this._flicking,"Renderer"),o=r.control,a=this._getPanelAlign(),n=function(e){p(e)||(e=[e]);var t=[];return e.forEach(function(e){if(H(e)){var n=document.createElement("div");for(n.innerHTML=e,t.push.apply(t,d([],h(g(n.children))));n.firstChild;)n.removeChild(n.firstChild)}else{if(!e||e.nodeType!==Node.ELEMENT_NODE)throw new A(C(e,["HTMLElement","string"]),N.WRONG_TYPE);t.push(e)}}),t}(n),l=m(e,t.length),e=t.slice(l),s=n.map(function(e,n){return new se({el:e,index:l+n,align:a,flicking:r})});if(s.length<=0)return[];i.resetPanelElementOrder(t),t.splice.apply(t,d([l,0],h(s))),i.insertPanelElements(s,e[0]||null),s.forEach(function(e){return e.resize()});var u=this._getPanelSizeSum(s);return e.forEach(function(e){e.increaseIndex(s.length),e.increasePosition(u)}),this._updateCameraAndControl(),this.render(),0<s.length&&!o.animating&&o.moveToPanel(o.activePanel||s[0],{duration:0}).catch(function(){}),s},n.remove=function(e,n){void 0===n&&(n=1);var t=this._panels,i=this._elementManipulator,r=b(this._flicking,"Renderer"),o=r.camera,a=r.control,l=a.activePanel,r=m(e,t.length),e=t.slice(r+n),s=t.splice(r,n);if(s.length<=0)return[];i.resetPanelElementOrder(t);var u=this._getPanelSizeSum(s);return e.forEach(function(e){e.decreaseIndex(s.length),e.decreasePosition(u)}),i.removePanelElements(s),s.forEach(function(e){return e.destroy()}),this._updateCameraAndControl(),v(s,l)&&a.resetActivePanel(),this.render(),0<s.length&&!a.animating&&((l=v(s,l)?e[0]||t[t.length-1]:l)?a.moveToPanel(l,{duration:0}).catch(function(){}):o.lookAt(0)),s},n.updatePanelSize=function(){return this._panels.forEach(function(e){return e.resize()}),this},n._collectPanels=function(){var t=b(this._flicking,"Renderer"),e=t.camera.element;this._elementManipulator.removeAllTextNodes(e);var i=this._getPanelAlign(),e=g(e.children);return this._panels=e.map(function(e,n){return new se({flicking:t,el:e,index:n,align:i})}),this},n._getPanelAlign=function(){var e=this._align;return"object"==typeof e?e.panel:e},n._getPanelSizeSum=function(e){var n=e[0],t=e[e.length-1],e=t.margin.next-n.margin.prev;return t.range.max-n.range.min+e},n._updateCameraAndControl=function(){var e=b(this._flicking,"Renderer"),n=e.camera,e=e.control;n.updateRange(),n.updateAnchors(),n.resetNeedPanelHistory(),e.updateInput()},e}(),ce=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return a(n,e),n.prototype.render=function(){return this},n}(B),fe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}a(n,e);var t=n.prototype;return t.render=function(){var e=b(this._flicking,"Renderer"),n=e.camera,t=n.element,i=e.renderer.panels,r=n.visiblePanels,e=this._elementManipulator;if(i.length<=0||r.length<=0)return n.offset=0,this;var i=d([],h(i)).sort(function(e,n){return e.position+e.offset-(n.position+n.offset)}),o=d([],h(r)).sort(function(e,n){return e.position+e.offset-(n.position+n.offset)});e.removeAllChildNodes(t),e.insertPanelElements(o,null);e=function(e,n){for(var t=0;t<e.length;t++)if(n(e[t]))return t;return-1}(i,function(e){return e.index===o[0].index}),e=i.slice(0,e),e=this._calcPanelRangeSize(e);return n.offset=e,this},t._calcPanelRangeSize=function(e){return e.reduce(function(e,n){return e+n.sizeIncludingMargin},0)},n}(ce),he=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}a(n,e);var t=n.prototype;return t.insertPanelElements=function(e,n){var t=b(this._flicking,"Renderer").camera.element,n=(null==n?void 0:n.element)||null,i=document.createDocumentFragment();return e.forEach(function(e){return i.appendChild(e.element)}),t.insertBefore(i,n),this},t.movePanelElementsToStart=function(e){var n=b(this._flicking,"Renderer").camera,t=n.element,i=n.rangeDiff,n=e.map(function(e){return e.element}),t=v(n,t.firstElementChild)?null:t.firstElementChild;return this._relocatePanelElements(e,t),e.forEach(function(e){e.decreaseOffset(i)}),this},t.movePanelElementsToEnd=function(e){var n=b(this._flicking,"Renderer").camera.rangeDiff;return this._relocatePanelElements(e,null),e.forEach(function(e){e.increaseOffset(n)}),this},t.resetPanelElementOrder=function(e){var n=b(this._flicking,"Renderer").camera.element;return this._relocatePanelElements(e.filter(function(e){return e.element.parentElement===n}),null),e.forEach(function(e){e.resetOffset()}),this},t.removePanelElements=function(e){var n=b(this._flicking,"Renderer").camera.element;return e.forEach(function(e){n.removeChild(e.element)}),this},t.removeAllChildNodes=function(e){for(;e.firstChild;)e.removeChild(e.firstChild);return this},t.removeAllTextNodes=function(n){return n.childNodes.forEach(function(e){e.nodeType===Node.TEXT_NODE&&n.removeChild(e)}),this},t._relocatePanelElements=function(e,n){var t=b(this._flicking,"Renderer").camera.element,i=document.createDocumentFragment();e.forEach(function(e){return i.appendChild(e.element)}),t.insertBefore(i,n)},n}(ue),de=function(i){function e(){return null!==i&&i.apply(this,arguments)||this}a(e,i);var n=e.prototype;return n.movePanelElementsToStart=function(e,t){var n=b(this._flicking,"Renderer");return n.circular&&!n.renderOnlyVisible&&e.forEach(function(e,n){t[n].toggled?e.element.style.order="-1":e.element.style.order="0"}),i.prototype.movePanelElementsToStart.call(this,e,t)},n.movePanelElementsToEnd=function(e,t){var n=b(this._flicking,"Renderer");return n.circular&&!n.renderOnlyVisible&&e.forEach(function(e,n){t[n].toggled?e.element.style.order="1":e.element.style.order="0"}),i.prototype.movePanelElementsToEnd.call(this,e,t)},n.resetPanelElementOrder=function(e){var n=b(this._flicking,"Renderer");return n.circular&&!n.renderOnlyVisible&&e.forEach(function(e){e.element.style.order="0"}),i.prototype.resetPanelElementOrder.call(this,e)},e}(ue),re={__proto__:null,Renderer:B,RawRenderer:ce,VisibleRenderer:fe,OffsetManipulator:ue,ElementManipulator:he,OrderManipulator:de},B=function(T){function e(e,n){var t=void 0===n?{}:n,i=t.align,r=void 0===i?M.CENTER:i,o=t.defaultIndex,a=void 0===o?0:o,l=t.horizontal,s=void 0===l||l,u=t.circular,c=void 0!==u&&u,f=t.bound,h=void 0!==f&&f,d=t.adaptive,g=void 0!==d&&d,p=t.needPanelThreshold,_=void 0===p?0:p,m=t.deceleration,v=void 0===m?.0075:m,b=t.duration,E=void 0===b?500:b,P=t.easing,y=void 0===P?function(e){return 1-Math.pow(1-e,3)}:P,n=t.inputType,i=void 0===n?["mouse","touch"]:n,o=t.moveType,l=void 0===o?"snap":o,u=t.threshold,f=void 0===u?40:u,d=t.interruptable,p=void 0===d||d,m=t.bounce,b=void 0===m?"20%":m,P=t.iOSEdgeSwipeThreshold,n=void 0===P?30:P,o=t.preventClickOnDrag,u=void 0===o||o,d=t.renderOnlyVisible,m=void 0!==d&&d,P=t.autoInit,o=void 0===P||P,d=t.autoResize,P=void 0===d||d,d=t.renderExternal,d=void 0!==d&&d,t=t.useOrderManipulator,t=void 0!==t&&t,O=T.call(this)||this;return O.resize=function(){var e=O._viewport,n=O._renderer,t=O._camera,i=O._control,r=e.width,o=e.height;O.trigger(new x.ComponentEvent(L.BEFORE_RESIZE,{width:r,height:o,element:e.element})),e.resize(),n.updatePanelSize(),n.elementManipulator.resetPanelElementOrder(n.panels),t.updateAlignPos(),t.updateRange(),t.updateAnchors(),i.updateInput(),t.updatePosition();i=e.width,t=e.height;return O.trigger(new x.ComponentEvent(L.AFTER_RESIZE,{width:e.width,height:e.height,prev:{width:r,height:o},sizeChanged:i!==r||t!==o,element:e.element})),O},O._preventClickWhenDragged=function(e){O._control.animating&&e.preventDefault()},O._initialized=!1,O._align=r,O._defaultIndex=a,O._horizontal=s,O._circular=c,O._bound=h,O._adaptive=g,O._needPanelThreshold=_,O._deceleration=v,O._duration=E,O._easing=y,O._inputType=i,O._moveType=l,O._threshold=f,O._interruptable=p,O._bounce=b,O._iOSEdgeSwipeThreshold=n,O._preventClickOnDrag=u,O._renderOnlyVisible=m,O._autoResize=P,O._autoInit=o,O._renderExternal=d,O._useOrderManipulator=t,O._viewport=new F(function(e,n){var t=null;if(H(e)){n=(n||document).querySelector(e);if(!n)throw new A(w(e),N.ELEMENT_NOT_FOUND);t=n}else e&&e.nodeType===Node.ELEMENT_NODE&&(t=e);if(!t)throw new A(C(e,["HTMLElement","string"]),N.WRONG_TYPE);return t}(e)),O._renderer=O._createRenderer(),O._camera=O._createCamera(),O._control=O._createControl(),O._autoInit&&O.init(),O}a(e,T);var n=e.prototype;return Object.defineProperty(n,"control",{get:function(){return this._control},enumerable:!1,configurable:!0}),Object.defineProperty(n,"camera",{get:function(){return this._camera},enumerable:!1,configurable:!0}),Object.defineProperty(n,"renderer",{get:function(){return this._renderer},enumerable:!1,configurable:!0}),Object.defineProperty(n,"viewport",{get:function(){return this._viewport},enumerable:!1,configurable:!0}),Object.defineProperty(n,"initialized",{get:function(){return this._initialized},enumerable:!1,configurable:!0}),Object.defineProperty(n,"circularEnabled",{get:function(){return this._camera.controlParams.circular},enumerable:!1,configurable:!0}),Object.defineProperty(n,"index",{get:function(){return this._control.activeIndex},enumerable:!1,configurable:!0}),Object.defineProperty(n,"element",{get:function(){return this._viewport.element},enumerable:!1,configurable:!0}),Object.defineProperty(n,"currentPanel",{get:function(){return this._control.activePanel},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panels",{get:function(){return this._renderer.panels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"panelCount",{get:function(){return this._renderer.panelCount},enumerable:!1,configurable:!0}),Object.defineProperty(n,"visiblePanels",{get:function(){return this._camera.visiblePanels},enumerable:!1,configurable:!0}),Object.defineProperty(n,"animating",{get:function(){return this._control.animating},enumerable:!1,configurable:!0}),Object.defineProperty(n,"holding",{get:function(){return this._control.holding},enumerable:!1,configurable:!0}),Object.defineProperty(n,"align",{get:function(){return this._align},set:function(e){this._align=e,this._renderer.align=e,this._camera.align=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"defaultIndex",{get:function(){return this._defaultIndex},set:function(e){this._defaultIndex=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"horizontal",{get:function(){return this._horizontal},set:function(e){this._horizontal=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"circular",{get:function(){return this._circular},set:function(e){this._circular=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"bound",{get:function(){return this._bound},set:function(e){this._bound=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"adaptive",{get:function(){return this._adaptive},set:function(e){this._adaptive=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"needPanelThreshold",{get:function(){return this._needPanelThreshold},enumerable:!1,configurable:!0}),Object.defineProperty(n,"deceleration",{get:function(){return this._deceleration},set:function(e){this._deceleration=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"easing",{get:function(){return this._easing},set:function(e){this._easing=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"duration",{get:function(){return this._duration},set:function(e){this._duration=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"inputType",{get:function(){return this._inputType},set:function(e){this._inputType=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"moveType",{get:function(){return this._moveType},set:function(e){this._moveType=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"threshold",{get:function(){return this._threshold},set:function(e){this._threshold=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"interruptable",{get:function(){return this._interruptable},set:function(e){this._interruptable=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"bounce",{get:function(){return this._bounce},set:function(e){this._bounce=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"iOSEdgeSwipeThreshold",{get:function(){return this._iOSEdgeSwipeThreshold},set:function(e){this._iOSEdgeSwipeThreshold=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"preventClickOnDrag",{get:function(){return this._preventClickOnDrag},set:function(e){this._preventClickOnDrag=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"renderOnlyVisible",{get:function(){return this._renderOnlyVisible},set:function(e){this._renderOnlyVisible=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"autoInit",{get:function(){return this._autoInit},enumerable:!1,configurable:!0}),Object.defineProperty(n,"autoResize",{get:function(){return this._autoResize},set:function(e){this._autoResize=e},enumerable:!1,configurable:!0}),Object.defineProperty(n,"renderExternal",{get:function(){return this._renderExternal},enumerable:!1,configurable:!0}),Object.defineProperty(n,"useOrderManipulator",{get:function(){return this._useOrderManipulator},set:function(e){this._useOrderManipulator=e},enumerable:!1,configurable:!0}),n.init=function(){if(this._initialized)return this;var e=this._camera,n=this._renderer,t=this._control,i=this._viewport;return e.init(this),n.init(this),t.init(this),this.resize(),this._moveToInitialPanel(),this._autoResize&&window.addEventListener("resize",this.resize),this._preventClickOnDrag&&i.element.addEventListener("click",this._preventClickWhenDragged),this._initialized=!0,this.trigger(new x.ComponentEvent(L.READY)),this},n.destroy=function(){this._initialized&&(this.off(),window.removeEventListener("resize",this.resize),this._viewport.element.removeEventListener("click",this._preventClickWhenDragged),this._control.destroy(),this._camera.destroy(),this._renderer.destroy(),this._initialized=!1)},n.prev=function(e){var n;return void 0===e&&(e=this._duration),this.moveTo(null!==(n=null===(n=null===(n=this._control.activePanel)||void 0===n?void 0:n.prev())||void 0===n?void 0:n.index)&&void 0!==n?n:-1,e,z.PREV)},n.next=function(e){var n;return void 0===e&&(e=this._duration),this.moveTo(null!==(n=null===(n=null===(n=this._control.activePanel)||void 0===n?void 0:n.next())||void 0===n?void 0:n.index)&&void 0!==n?n:this._renderer.panelCount,e,z.NEXT)},n.moveTo=function(e,n,t){void 0===n&&(n=this._duration),void 0===t&&(t=z.NONE);var i=this._renderer,r=i.panelCount,i=i.getPanel(e);return i?this._control.animating?Promise.reject(new A(D,N.ANIMATION_ALREADY_PLAYING)):this._control.moveToPanel(i,{duration:n,direction:t}):Promise.reject(new A(I(e,0,r-1),N.INDEX_OUT_OF_RANGE))},n.getPanel=function(e){return this._renderer.getPanel(e)},n.enableInput=function(){return this._control.enable(),this},n.disableInput=function(){return this._control.disable(),this},n.getStatus=function(){return{index:-1,panels:[],position:0}},n.setStatus=function(e){},n.addPlugins=function(e){return this},n.removePlugins=function(e){return this},n.append=function(e){return this.insert(this._renderer.panelCount,e)},n.prepend=function(e){return this.insert(0,e)},n.insert=function(e,n){if(this._renderExternal)throw new A(j,N.NOT_ALLOWED_IN_FRAMEWORK);return this._renderer.insert(e,n)},n.remove=function(e,n){if(void 0===n&&(n=1),this._renderExternal)throw new A(j,N.NOT_ALLOWED_IN_FRAMEWORK);return this._renderer.remove(e,n)},n._createControl=function(){var e=this._moveType,n=Object.keys(G).map(function(e){return G[e]});if(!v(n,e))throw new A(O("moveType",JSON.stringify(e)),N.WRONG_OPTION);switch(e){case G.SNAP:return new ee;case G.FREE_SCROLL:return new ne}},n._createCamera=function(){var e={align:this._align};return this._circular?(this._bound&&console.warn('"circular" and "bound" option cannot be used together, ignoring bound.'),new ae(e)):new(this._bound?le:oe)(e)},n._createRenderer=function(){var e=new(this._useOrderManipulator?de:this._renderExternal?ue:he),e={align:this._align,elementManipulator:e};return this._createActualRenderer(e)},n._createActualRenderer=function(e){return new(this._renderOnlyVisible?fe:ce)(e)},n._moveToInitialPanel=function(){var e=this._renderer,n=this._control,e=e.getPanel(this._defaultIndex)||e.getPanel(0);e&&n.moveToPanel(e,{duration:0})},e.VERSION="4.0.0-beta.1",e}(x);return e(B,{__proto__:null,Panel:se,Viewport:F,FlickingError:A,AnchorPoint:ie}),e(B,$),e(B,te),e(B,re),e(B,n),B});
 //# sourceMappingURL=flicking.min.js.map

jsconfig.json

@@ -5,2 +5,2 @@ {
   }
-}
+}

package.json

 {
   "name": "@egjs/flicking",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.2",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -17,8 +17,8 @@ "main": "dist/flicking.js",
     "test": "karma start",
-    "e2e:prepare": "npm run build",
-    "e2e": "concurrently -k -r -s \"first\" npm:e2e:open npm:e2e:once",
+    "e2e": "concurrently -k -r -s \"first\" npm:e2e:open-silent npm:e2e:once",
     "e2e:once": "codeceptjs run --steps",
     "e2e:headless": "HEADLESS=true codeceptjs run --steps",
-    "e2e:ui": "concurrently -k -r -s \"first\" npm:e2e:open \"codecept-ui --app\"",
-    "e2e:open": "http-serve -s",
+    "e2e:ui": "concurrently -k -r -s \"first\" npm:e2e:open-silent \"codecept-ui --app\"",
+    "e2e:open": "npm run storybook:all",
+    "e2e:open-silent": "npm run storybook:all 2>&1 >/dev/null",
     "test:chrome": "karma start --chrome",
@@ -29,3 +29,6 @@ "coverage": "karma start --coverage && print-coveralls --sort=desc",
     "lint:e2e": "eslint 'test/e2e/**/*.ts'",
-    "jsdoc": "rm -rf ./doc && jsdoc -c jsdoc.json",
+    "jsdoc": "jsdoc -c jsdoc.json",
+    "jsdoc:watch": "npm-watch jsdoc",
+    "docs": "ts-node -P jsdoc-to-mdx/tsconfig.json -T jsdoc-to-mdx/generate",
+    "demo:start": "rollup -w --config ./rollup.config.demo.js",
     "demo:build": "npm run build && cpx 'dist/**/*' demo/release/latest/dist --clean",
@@ -47,6 +50,6 @@ "demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean && cpx 'doc/**/*' demo/release/$npm_package_version/doc --clean",
     "storybook:all": "concurrently -r npm:storybook:html npm:storybook:react npm:storybook:vue npm:storybook:angular",
-    "storybook:html": "node_modules/@storybook/html/bin/index.js -p 9005 -c .storybook/html --quiet",
-    "storybook:react": "node_modules/@storybook/react/bin/index.js -p 9006 -c .storybook/react --quiet",
-    "storybook:vue": "node_modules/@storybook/vue/bin/index.js -p 9007 -c .storybook/vue --quiet",
-    "storybook:angular": "node_modules/@storybook/angular/bin/index.js -p 9008 -c .storybook/angular --quiet",
+    "storybook:html": "node_modules/@storybook/html/bin/index.js -p 9005 -c .storybook/html -s ./test/e2e/public --quiet",
+    "storybook:react": "node_modules/@storybook/react/bin/index.js -p 9006 -c .storybook/react -s ./test/e2e/public --quiet",
+    "storybook:vue": "node_modules/@storybook/vue/bin/index.js -p 9007 -c .storybook/vue -s ./test/e2e/public --quiet",
+    "storybook:angular": "node_modules/@storybook/angular/bin/index.js -p 9008 -c .storybook/angular -s ./test/e2e/public --quiet",
     "build-storybook": "build-storybook"
@@ -71,2 +74,19 @@ },
   ],
+  "keywords": [
+    "carousel",
+    "flicking",
+    "slider",
+    "mouse",
+    "touch",
+    "desktop",
+    "mobile",
+    "react",
+    "vue",
+    "angular",
+    "preact",
+    "gallery",
+    "slideshow",
+    "swipe",
+    "egjs"
+  ],
   "devDependencies": {
@@ -101,2 +121,3 @@ "@angular-devkit/build-angular": "^0.1102.5",
     "@types/chai": "^4.2.15",
+    "@types/fs-extra": "^9.0.11",
     "@types/karma-chai": "^0.1.1",
@@ -114,2 +135,3 @@ "@types/mocha": "^5.2.5",
     "codeceptjs": "^3.0.5",
+    "codeceptjs-resemblehelper": "^1.9.3",
     "concurrently": "^6.0.0",
@@ -130,2 +152,3 @@ "core-js": "^3.9.1",
     "husky": "^1.3.1",
+    "jsdoc-to-markdown": "^7.0.0",
     "karma": "^3.1.4",
@@ -139,3 +162,5 @@ "karma-chai": "^0.1.0",
     "karma-viewport": "^1.0.8",
+    "mermaid": "^8.9.2",
     "mocha": "^5.2.0",
+    "npm-watch": "^0.9.0",
     "playwright": "^1.9.2",
@@ -159,2 +184,3 @@ "postcss-clean": "^1.2.2",
     "sinon": "^7.2.3",
+    "stream-read-all": "^3.0.1",
     "sync-exec": "^0.6.2",
@@ -177,3 +203,2 @@ "ts-mock-imports": "^1.3.3",
     "@egjs/component": "^3.0.1",
-    "@egjs/imready": "^1.1.2",
     "@egjs/list-differ": "^1.0.0"
@@ -186,3 +211,12 @@ },
     }
+  },
+  "watch": {
+    "jsdoc": {
+      "patterns": [
+        "src"
+      ],
+      "extensions": "ts",
+      "runOnChangeOnly": false
+    }
   }
 }

README.md

@@ -1,33 +0,33 @@
-<h1 align=center style="max-width: 100%;">
-  <img width="800" alt="Flicking Logo" src="https://naver.github.io/egjs-flicking/images/flicking.svg" style="max-width: 100%;"><br/>
+<h1 align="center" style="max-width: 100%;">
+  <img width="800" alt="Flicking Logo" src="https://naver.github.io/egjs-flicking/images/flicking.svg" style="max-width: 100%;" /><br/>
   <a href="https://naver.github.io/egjs-flicking/">@egjs/flicking</a>
 </h1>
 
-<p align=center style="line-height: 2;">
+<p align="center" style="line-height: 2;">
   <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking.svg?style=flat-square&color=007acc&label=version&logo=NPM" alt="version" /></a>
-  <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/flicking.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc"></a>
+  <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/flicking.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc" /></a>
   <a href="https://travis-ci.org/naver/egjs-flicking" target="_blank"><img alt="Travis (.org)" src="https://img.shields.io/travis/naver/egjs-flicking.svg?style=flat-square&label=build&logo=travis%20ci" /></a>
-  <a href="https://coveralls.io/github/naver/egjs-flicking?branch=master&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-flicking.svg?style=flat-square&label=%E2%9C%85%20coverage"></a>
+  <a href="https://coveralls.io/github/naver/egjs-flicking?branch=master&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-flicking.svg?style=flat-square&label=%E2%9C%85%20coverage" /></a>
   <a href="https://github.com/naver/egjs-flicking/graphs/commit-activity">
-<img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/naver/egjs-flicking.svg?color=08CE5D&label=%E2%AC%86%20commits&style=flat-square"></a>
-  <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/dm/@egjs/flicking.svg?style=flat-square&label=%E2%AC%87%20downloads&color=08CE5D" alt="npm downloads per month"></a>
-  <a href="https://github.com/naver/egjs-flicking/graphs/contributors" target="_blank"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/naver/egjs-flicking.svg?label=%F0%9F%91%A5%20contributors&style=flat-square&color=08CE5D"></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/LICENSE" target="_blank"><img alt="GitHub" src="https://img.shields.io/github/license/naver/egjs-flicking.svg?style=flat-square&label=%F0%9F%93%9C%20license&color=08CE5D"></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&logo=Angular&color=dd0031"></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&logo=React&logoColor=white&color=61dafb"></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&logo=Vue.js&logoColor=white&color=42b883"></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&logo=Preact&logoColor=white&color=673ab8"></a>
-<img src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript">
-<a href="https://deepscan.io/dashboard#view=project&tid=3998&pid=5802&bid=46086"><img src="https://deepscan.io/api/teams/3998/projects/5802/branches/46086/badge/grade.svg" alt="DeepScan grade"></a>
+<img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/naver/egjs-flicking.svg?color=08CE5D&label=%E2%AC%86%20commits&style=flat-square" /></a>
+  <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/dm/@egjs/flicking.svg?style=flat-square&label=%E2%AC%87%20downloads&color=08CE5D" alt="npm downloads per month" /></a>
+  <a href="https://github.com/naver/egjs-flicking/graphs/contributors" target="_blank"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/naver/egjs-flicking.svg?label=%F0%9F%91%A5%20contributors&style=flat-square&color=08CE5D" /></a>
+  <a href="https://github.com/naver/egjs-flicking/blob/master/LICENSE" target="_blank"><img alt="GitHub" src="https://img.shields.io/github/license/naver/egjs-flicking.svg?style=flat-square&label=%F0%9F%93%9C%20license&color=08CE5D" /></a>
+  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&logo=Angular&color=dd0031" /></a>
+  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&logo=React&logoColor=white&color=61dafb" /></a>
+  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&logo=Vue.js&logoColor=white&color=42b883" /></a>
+  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&logo=Preact&logoColor=white&color=673ab8" /></a>
+<img src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript" />
+<a href="https://deepscan.io/dashboard#view=project&tid=3998&pid=5802&bid=46086"><img src="https://deepscan.io/api/teams/3998/projects/5802/branches/46086/badge/grade.svg" alt="DeepScan grade" /></a>
 </p>
 
-<h3 align=center>
+<h3 align="center">
   <a href="https://naver.github.io/egjs-flicking/">Demo</a> / <a href="https://naver.github.io/egjs-flicking/release/latest/doc/index.html">Documentation</a> / <a href="https://naver.github.io/egjs/"><img height="20" src="https://naver.github.io/egjs/img/logo.svg"/> Other components</a>
 </h3>
 
-<p align=center>
-  <b>Everyday 30 million people experience. It's reliable, flexible and extendable carousel.</b><br>📱💻🖥
+<p align="center">
+  <b>Everyday 30 million people experience. It's reliable, flexible and extendable carousel.</b><br />📱💻🖥
 </p>
 
-<p align=center>
+<p align="center">
   Translations:
@@ -37,3 +37,3 @@ <a href="https://github.com/naver/egjs-flicking/blob/master/README.md">🇺🇸</a>
 </p>
-<p align=center>
+<p align="center">
   <b>Supported Frameworks</b><br/>
@@ -62,7 +62,7 @@ <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/images/angular.svg" alt="AngularJS" /></a>&nbsp;&nbsp;
 </table>
-<h6 align=center>
+<h6 align="center">
   🖱️Click each images to see its source or check our <a href="https://naver.github.io/egjs-flicking/">full demos</a>.
 </h6>
 
-<p align=center>
+<p align="center">
   <img width="300" src="https://user-images.githubusercontent.com/26213435/59832831-cebaf780-937f-11e9-84cd-e21f8cf1fd07.gif" />
@@ -156,3 +156,3 @@ </p>
 ## 🌐 Supported Browsers
-|<img width="20" src="https://simpleicons.org/icons/internetexplorer.svg" alt="IE" />|<img width="20" src="https://simpleicons.org/icons/googlechrome.svg" alt="Chrome" />|<img width="20" src="https://simpleicons.org/icons/firefoxbrowser.svg" alt="Firefox" />|<img width="20" src="https://simpleicons.org/icons/safari.svg" alt="Safari" />|<img width="20" src="https://simpleicons.org/icons/apple.svg" alt="iOS" />|<img width="20" src="https://simpleicons.org/icons/android.svg" alt="Android">|
+|<img width="20" src="https://simpleicons.org/icons/internetexplorer.svg" alt="IE" />|<img width="20" src="https://simpleicons.org/icons/googlechrome.svg" alt="Chrome" />|<img width="20" src="https://simpleicons.org/icons/firefoxbrowser.svg" alt="Firefox" />|<img width="20" src="https://simpleicons.org/icons/safari.svg" alt="Safari" />|<img width="20" src="https://simpleicons.org/icons/apple.svg" alt="iOS" />|<img width="20" src="https://simpleicons.org/icons/android.svg" alt="Android" />|
 |:---:|:---:|:---:|:---:|:---:|:---:|
@@ -198,4 +198,4 @@ |10+|Latest|Latest|Latest|7+|4+|
 
-<p align=center>
-  <a href="https://naver.github.io/egjs/"><img height="50" src="https://naver.github.io/egjs/img/logotype1_black.svg" ></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/naver"><img height="50" src="https://naver.github.io/OpenSourceGuide/book/assets/naver_logo.png" /></a>
+<p align="center">
+  <a href="https://naver.github.io/egjs/"><img height="50" src="https://naver.github.io/egjs/img/logotype1_black.svg" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/naver"><img height="50" src="https://naver.github.io/OpenSourceGuide/book/assets/naver_logo.png" /></a>
 </p>

src/camera/BoundCamera.ts

@@ -9,3 +9,16 @@ /*
 
+/**
+ * A {@link Camera} that set range not to go out of the first/last panel, so it won't show empty spaces before/after the first/last panel
+ * @ko 첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 {@link Camera}
+ */
 class BoundCamera extends Camera {
+  /**
+   * Update {@link Camera#range range} of Camera
+   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+   * @chainable
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @return {this}
+   */
   public updateRange() {
@@ -31,3 +44,3 @@ const flicking = getFlickingAttached(this._flicking, "Camera");
     if (canSetBoundMode) {
-      this._range = { min: firstPanelPrev + alignPos, max: lastPanelNext - alignPos };
+      this._range = { min: firstPanelPrev + alignPos, max: lastPanelNext - viewportSize + alignPos };
     } else {
@@ -34,0 +47,0 @@ this._range = { min: firstPanel.position, max: lastPanel.position };

src/camera/Camera.ts

@@ -19,2 +19,6 @@ /*
 
+/**
+ * A component that manages actual movement inside the viewport
+ * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
+ */
 abstract class Camera {
@@ -37,12 +41,92 @@ // Options
   // Internal states getter
+  /**
+   * The camera(`.flicking-camera`) element
+   * @ko 카메라(`.flicking-camera`) 엘리먼트
+   * @type {HTMLElement}
+   * @readonly
+   */
   public get element() { return this._el; }
+  /**
+   * Current position of the camera
+   * @ko Camera의 현재 좌표
+   * @type {number}
+   * @readonly
+   */
   public get position() { return this._position; }
+  /**
+   * Align position inside the viewport where {@link Panel}'s {@link Panel#alignPosition alignPosition} should be located at
+   * @ko 패널의 정렬 기준 위치. 뷰포트 내에서 {@link Panel}의 {@link Panel#alignPosition alignPosition}이 위치해야 하는 곳입니다
+   * @type {number}
+   * @readonly
+   */
   public get alignPosition() { return this._alignPos; }
+  /**
+   * Position offset, used for the {@link Flicking#renderOnlyVisible renderOnlyVisible} option
+   * @ko Camera의 좌표 오프셋. {@link Flicking#renderOnlyVisible renderOnlyVisible} 옵션을 위해 사용됩니다.
+   * @type {number}
+   * @default 0
+   */
   public get offset() { return this._offset; }
+  /**
+   * A range that Camera's {@link Camera#position position} can reach
+   * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
+   * @type {object}
+   * @property {number} min A minimum position<ko>최소 위치</ko>
+   * @property {number} min A maximum position<ko>최대 위치</ko>
+   * @readonly
+   */
   public get range() { return this._range; }
+  /**
+   * A difference between Camera's minimum and maximum position that can reach
+   * @ko Camera가 도달 가능한 최소/최대 좌표의 차이
+   * @type {number}
+   * @readonly
+   */
   public get rangeDiff() { return this._range.max - this._range.min; }
+  /**
+   * An array of visible panels from the current position
+   * @ko 현재 보이는 패널들의 배열
+   * @type {Panel[]}
+   * @readonly
+   */
   public get visiblePanels() { return this._visiblePanels; }
+  /**
+   * A range of the visible area from the current position
+   * @ko 현재 위치에서 보이는 범위
+   * @type {object}
+   * @property {number} min A minimum position<ko>최소 위치</ko>
+   * @property {number} min A maximum position<ko>최대 위치</ko>
+   * @readonly
+   */
   public get visibleRange() { return { min: this._position - this._alignPos, max: this._position - this._alignPos + this.size }; }
+  /**
+   * An array of {@link AnchorPoint}s that Camera can be stopped at
+   * @ko 카메라가 도달 가능한 {@link AnchorPoint}의 목록
+   * @type {AnchorPoint[]}
+   * @readonly
+   */
   public get anchorPoints() { return this._anchors; }
+  /**
+   * A current parameters of the Camera for updating {@link AxesController}
+   * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들
+   * @type {object}
+   * @property {object} range Camera {@link Camera#range range}<ko>Camera가 도달 가능한 범위({@link Camera#range range})</ko>
+   * @property {number} position Current position<ko>현재 좌표</ko>
+   * @property {boolean} circular A Boolean indicating whether the {@link Flicking#circular circular} option is enabled<ko>{@link Flicking#circular circular}옵션 활성화 여부</ko>
+   * @readonly
+   */
   public get controlParams() { return { range: this._range, position: this._position, circular: false }; }
+  /**
+   * A Boolean value indicating whether Camera's over the minimum or maximum position reachable
+   * @ko 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
+   * @type {boolean}
+   * @readonly
+   */
+  public get atEdge() { return this._position <= this._range.min || this._position >= this._range.max; }
+  /**
+   * Return the size of the viewport
+   * @ko 뷰포트 크기를 반환합니다
+   * @type {number}
+   * @readonly
+   */
   public get size() {
@@ -60,2 +144,7 @@ const flicking = this._flicking;
   // Options Getter
+  /**
+   * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element
+   * @ko {@link Camera#alignPosition alignPosition}이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값
+   * @type {Constants.ALIGN | string | number}
+   */
   public get align() { return this._align; }
@@ -68,2 +157,3 @@
 
+  /** */
   public constructor({
@@ -79,4 +169,28 @@ align = ALIGN.CENTER
 
+  /**
+   * Update {@link Camera#range range} of Camera
+   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+   * @method
+   * @abstract
+   * @memberof Camera
+   * @instance
+   * @name updateRange
+   * @chainable
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @return {this}
+   */
   public abstract updateRange(): this;
 
+  /**
+   * Initialize Camera
+   * @ko Camera를 초기화합니다
+   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
+   * @chainable
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
+   * <ko>{@link Constants.ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
+   * @return {this}
+   */
   public init(flicking: Flicking): this {
@@ -94,2 +208,7 @@ this._flicking = flicking;
 
+  /**
+   * Destroy Camera and return to initial state
+   * @ko Camera를 초기 상태로 되돌립니다
+   * @return {void}
+   */
   public destroy(): this {
@@ -101,2 +220,11 @@ this._flicking = null;
 
+  /**
+   * Move to the given position and apply CSS transform
+   * @ko 해당 좌표로 이동하고, CSS transform을 적용합니다
+   * @param {number} pos A new position<ko>움직일 위치</ko>
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @return {this}
+   */
   public lookAt(pos: number): this {
@@ -114,2 +242,10 @@ const prevPos = this._position;
 
+  /**
+   * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}
+   * If it does not exist, return `null` instead
+   * @ko 주어진 {@link AnchorPoint}의 이전 {@link AnchorPoint}를 반환합니다
+   * 존재하지 않을 경우 `null`을 반환합니다
+   * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
+   * @return {AnchorPoint | null} The previous {@link AnchorPoint}<ko>이전 {@link AnchorPoint}</ko>
+   */
   public getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null {
@@ -119,2 +255,10 @@ return this._anchors[anchor.index - 1] || null;
 
+  /**
+   * Return a next {@link AnchorPoint} of given {@link AnchorPoint}
+   * If it does not exist, return `null` instead
+   * @ko 주어진 {@link AnchorPoint}의 다음 {@link AnchorPoint}를 반환합니다
+   * 존재하지 않을 경우 `null`을 반환합니다
+   * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
+   * @return {AnchorPoint | null} The next {@link AnchorPoint}<ko>다음 {@link AnchorPoint}</ko>
+   */
   public getNextAnchor(anchor: AnchorPoint): AnchorPoint | null {
@@ -124,2 +268,10 @@ return this._anchors[anchor.index + 1] || null;
 
+  /**
+   * Return {@link AnchorPoint} that includes given position
+   * If there's no {@link AnchorPoint} that includes the given position, return `null` instead
+   * @ko 주어진 좌표를 포함하는 {@link AnchorPoint}를 반환합니다
+   * 주어진 좌표를 포함하는 {@link AnchorPoint}가 없을 경우 `null`을 반환합니다
+   * @param {number} position A position to check<ko>확인할 좌표</ko>
+   * @return {AnchorPoint | null} The {@link AnchorPoint} that includes the given position<ko>해당 좌표를 포함하는 {@link AnchorPoint}</ko>
+   */
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
@@ -137,2 +289,10 @@ const anchors = this._anchors;
 
+  /**
+   * Return {@link AnchorPoint} nearest to given position
+   * If there're no {@link AnchorPoint}s, return `null` instead
+   * @ko 해당 좌표에서 가장 가까운 {@link AnchorPoint}를 반환합니다
+   * {@link AnchorPoint}가 하나도 없을 경우 `null`을 반환합니다
+   * @param {number} position A position to check<ko>확인할 좌표</ko>
+   * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position<ko>해당 좌표에 가장 인접한 {@link AnchorPoint}</ko>
+   */
   public findNearestAnchor(position: number): AnchorPoint | null {
@@ -160,2 +320,8 @@ const anchors = this._anchors;
 
+  /**
+   * Clamp the given position between camera's range
+   * @ko 주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다
+   * @param {number} position A position to clamp<ko>범위를 제한할 좌표</ko>
+   * @return {number} A clamped position<ko>범위 제한된 좌표</ko>
+   */
   public clampToReachablePosition(position: number): number {
@@ -166,2 +332,8 @@ const range = this._range;
 
+  /**
+   * Check whether the given panel is inside of the Camera's range
+   * @ko 해당 {@link Panel}이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다
+   * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
+   * @return {boolean} Whether the panel's inside Camera's range<ko>도달 가능한 범위 내에 해당 패널이 존재하는지 여부</ko>
+   */
   public canReach(panel: Panel): boolean {
@@ -177,2 +349,8 @@ const range = this._range;
 
+  /**
+   * Check whether the given panel element is visible at the current position
+   * @ko 현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다
+   * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
+   * @return Whether the panel element is visible at the current position<ko>현재 위치에서 해당 패널 엘리먼트가 보이는지 여부</ko>
+   */
   public canSee(panel: Panel): boolean {
@@ -184,2 +362,8 @@ const visibleRange = this.visibleRange;
 
+  /**
+   * Update Camera's {@link Camera#alignPosition alignPosition}
+   * @ko Camera의 {@link Camera#alignPosition alignPosition}을 업데이트합니다
+   * @chainable
+   * @return {this}
+   */
   public updateAlignPos(): this {
@@ -197,2 +381,11 @@ const align = this._align;
 
+  /**
+   * Update Camera's {@link Camera#anchorPoints anchorPoints}
+   * @ko Camera의 {@link Camera#anchorPoints anchorPoints}를 업데이트합니다
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @chainable
+   * @return {this}
+   */
   public updateAnchors(): this {
@@ -211,4 +404,31 @@ const flicking = getFlickingAttached(this._flicking, "Camera");
 
-  public resetNeedPanelHistory() {
+  /**
+   * Update position after resizing
+   * @ko resize 이후에 position을 업데이트합니다
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @chainable
+   * @return {this}
+   */
+  public updatePosition(): this {
+    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const activePanel = flicking.control.activePanel;
+
+    if (activePanel) {
+      this.lookAt(activePanel.position);
+    }
+
+    return this;
+  }
+
+  /**
+   * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
+   * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
+   * @chainable
+   * @return {this}
+   */
+  public resetNeedPanelHistory(): this {
     this._needPanelTriggered = { prev: false, next: false };
+    return this;
   }
@@ -215,0 +435,0 @@

src/camera/CircularCamera.ts

@@ -12,2 +12,10 @@ /*
 
+/**
+ * A data of the position that changes order of the panel elements
+ * @ko 패널 엘리먼트 순서가 변경되는 좌표의 데이터
+ * @interface
+ * @property {Panel} panel Toggling panel<ko>순서를 변경할 패널</ko>
+ * @property {Constants.DIRECTION} direction Toggling position<ko>순서를 변경할 방향</ko>
+ * @property {boolean} toggled Whether the panel has toggled its position to `direction`<ko>`direction` 방향으로 패널 위치를 변경했는지 여부를 나타내는 값</ko>
+ */
 export interface TogglePoint {
@@ -19,2 +27,6 @@ panel: Panel;
 
+/**
+ * A {@link Camera} that connects the last panel and the first panel, enabling continuous loop
+ * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
+ */
 class CircularCamera extends Camera {
@@ -126,2 +138,11 @@ private _circularOffset: number = 0;
 
+  /**
+   * Update {@link Camera#range range} of Camera
+   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+   * @chainable
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @return {this}
+   */
   public updateRange() {
@@ -128,0 +149,0 @@ const flicking = getFlickingAttached(this._flicking, "Camera");

src/camera/LinearCamera.ts

@@ -8,3 +8,16 @@ /*
 
+/**
+ * A {@link Camera} that can move from the position of the first panel to the position of the last panel
+ * @ko 첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 {@link Camera}
+ */
 class LinearCamera extends Camera {
+  /**
+   * Update {@link Camera#range range} of Camera
+   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+   * @chainable
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @return {this}
+   */
   public updateRange() {
@@ -11,0 +24,0 @@ const flicking = getFlickingAttached(this._flicking, "Camera");

src/cfc/withFlickingMethods.ts

@@ -10,3 +10,2 @@ /* eslint-disable @typescript-eslint/no-unsafe-call */
  * Decorator that makes the method of flicking available in the framework.
- *
  * @ko 프레임워크에서 플리킹의 메소드를 사용할 수 있게 하는 데코레이터.
@@ -25,3 +24,3 @@ * @memberof eg.Flicking
  */
-export default (prototype: any, flickingName: string) => {
+const withFlickingMethods = (prototype: any, flickingName: string) => {
   Object.getOwnPropertyNames(Flicking.prototype)
@@ -56,3 +55,5 @@ .filter(name => !prototype[name] && !name.startsWith("_") && name !== "constructor")
 };
+
+export default withFlickingMethods;
 /* eslint-enable @typescript-eslint/no-unsafe-member-access */
 /* eslint-enable @typescript-eslint/no-unsafe-assignment */

src/const/axes.ts

@@ -0,1 +1,5 @@
+/**
+ * All possible @egjs/axes event keys
+ * @internal
+ */
 export const EVENT = {
@@ -9,2 +13,6 @@ HOLD: "hold",
 
+/**
+ * An Axis key that Flicking uses
+ * @internal
+ */
 export const POSITION_KEY = "flick";

src/const/error.ts

@@ -8,19 +8,21 @@ /*
 /**
- * Error codes of {@link FlickingError}
- *
+ * Error codes of {@link FlickingError}. Below are the conditions where each error code occurs.
+ * @ko {@link FlickingError}의 에러 코드. 아래는 각각의 에러 코드가 발생하는 조건입니다.
  * @name ERROR_CODE
  * @memberof Constants
+ * @constant
  * @type object
- * @property {number} WRONG_TYPE 0
- * @property {number} ELEMENT_NOT_FOUND 1
- * @property {number} VAL_MUST_NOT_NULL 2
- * @property {number} NOT_ATTACHED_TO_FLICKING 3
- * @property {number} WRONG_OPTION 4
- * @property {number} INDEX_OUT_OF_RANGE 5
- * @property {number} POSITION_NOT_REACHABLE 6
- * @property {number} TRANSFORM_NOT_SUPPORTED 7
- * @property {number} STOP_CALLED_BY_USER 8
- * @property {number} ANIMATION_INTERRUPTED 9
- * @property {number} ANIMATION_ALREADY_PLAYING 10
- * @property {number} NOT_ALLOWED_IN_FRAMEWORK 11
+ * @property {number} WRONG_TYPE Parameter type is wrong<ko>패러미터의 타입이 잘못되었을 경우</ko>
+ * @property {number} ELEMENT_NOT_FOUND Element is not found inside page with the given CSS selector<ko>주어진 CSS selector로 페이지 내에서 해당 엘리먼트를 찾지 못했을 경우</ko>
+ * @property {number} VAL_MUST_NOT_NULL Expected non-null value, but given `null` or `undefined`<ko>값을 기대했으나, `null`이나 `undefined`를 받은 경우</ko>
+ * @property {number} NOT_ATTACHED_TO_FLICKING When Flicking's component is not initialized (i.e. {@link Flicking#init} is not called)<ko>Flicking 내부 컴포넌트가 초기화되지 않은 경우 ({@link Flicking#init}이 호출되지 않은 경우)</ko>
+ * @property {number} WRONG_OPTION One of the options is wrong<ko>옵션들 중 잘못된 값이 있을 때</ko>
+ * @property {number} INDEX_OUT_OF_RANGE When the given index is out of possible range<ko>인덱스가 주어진 범위를 벗어난 경우</ko>
+ * @property {number} POSITION_NOT_REACHABLE When {@link Control#moveToPosition}'s position parameter is out of possible range.<ko>{@link Control#moveToPosition}의 `position` 패러미터가 도달 가능한 범위를 벗어난 경우</ko>
+ * @property {number} TRANSFORM_NOT_SUPPORTED CSS `transform` property is not available(<=IE8) <ko>CSS `transform` 속성을 사용할 수 없는 경우(<=IE8)</ko>
+ * @property {number} STOP_CALLED_BY_USER When the event's `stop()` is called by user.<ko>사용자에 의해 이벤트의 `stop()`이 호출된 경우</ko>
+ * @property {number} ANIMATION_INTERRUPTED When the animation is interrupted by user.<ko>사용자에 의해 애니메이션이 중단된 경우</ko>
+ * @property {number} ANIMATION_ALREADY_PLAYING When the animation is already playing.<ko>현재 애니메이션이 이미 진행중인 경우</ko>
+ * @property {number} NOT_ALLOWED_IN_FRAMEWORK When the non-allowed method is called from frameworks (React, Angular, Vue...)
+ * <ko>프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우</ko>
  */
@@ -27,0 +29,0 @@ export const CODE = {

src/const/external.ts

@@ -6,18 +6,37 @@ /*
 /**
- * Event type object with event name strings.
+ * List of constants that flicking exports
+ * @ko Flicking이 export하는 상수들의 목록
+ * @namespace Constants
+ * @example
+ * ```
+ * // esm
+ * import { ERROR_CODE } from "@egjs/flicking";
  *
- * @ko 이벤트 이름 문자열들을 담은 객체
+ * // umd
+ * Flicking.ERROR_CODE
+ * ```
+ */
+export { CODE as ERROR_CODE } from "./error";
+
+/**
+ * Event type object with event name strings of {@link Flicking}
+ * @ko {@link Flicking}의 이벤트 이름 문자열들을 담은 객체
  * @type {object}
- * @property {"holdStart"} HOLD_START - holdStart event<ko>holdStart 이벤트</ko>
- * @property {"holdEnd"} HOLD_END - holdEnd event<ko>holdEnd 이벤트</ko>
- * @property {"moveStart"} MOVE_START - moveStart event<ko>moveStart 이벤트</ko>
- * @property {"move"} MOVE - move event<ko>move 이벤트</ko>
- * @property {"moveEnd"} MOVE_END - moveEnd event<ko>moveEnd 이벤트</ko>
- * @property {"change"} CHANGE - change event<ko>change 이벤트</ko>
- * @property {"restore"} RESTORE - restore event<ko>restore 이벤트</ko>
- * @property {"select"} SELECT - select event<ko>select 이벤트</ko>
- * @property {"needPanel"} NEED_PANEL - needPanel event<ko>needPanel 이벤트</ko>
+ * @memberof Constants
+ * @property {"holdStart"} HOLD_START holdStart event<ko>holdStart 이벤트</ko>
+ * @property {"holdEnd"} HOLD_END holdEnd event<ko>holdEnd 이벤트</ko>
+ * @property {"moveStart"} MOVE_START moveStart event<ko>moveStart 이벤트</ko>
+ * @property {"move"} MOVE move event<ko>move 이벤트</ko>
+ * @property {"moveEnd"} MOVE_END moveEnd event<ko>moveEnd 이벤트</ko>
+ * @property {"willChange"} WILL_CHANGE willChange event<ko>willChange 이벤트</ko>
+ * @property {"changed"} CHANGED changed event<ko>changed 이벤트</ko>
+ * @property {"willRestore"} WILL_RESTORE willRestore event<ko>willRestore 이벤트</ko>
+ * @property {"restored"} RESTORED restored event<ko>restored 이벤트</ko>
+ * @property {"select"} SELECT select event<ko>select 이벤트</ko>
+ * @property {"needPanel"} NEED_PANEL needPanel event<ko>needPanel 이벤트</ko>
  * @example
+ * ```ts
  * import { EVENTS } from "@egjs/flicking";
- * EVENTS.MOVE_START; // "MOVE_START"
+ * EVENTS.MOVE_START; // "moveStart"
+ * ```
  */
@@ -33,4 +52,6 @@ export const EVENTS = {
   MOVE_END: "moveEnd",
-  CHANGE: "change",
-  RESTORE: "restore",
+  WILL_CHANGE: "willChange",
+  CHANGED: "changed",
+  WILL_RESTORE: "willRestore",
+  RESTORED: "restored",
   SELECT: "select",
@@ -42,2 +63,11 @@ NEED_PANEL: "needPanel",
 
+/**
+ * An object with all possible predefined literal string for the {@link Flicking#align align} option
+ * @ko {@link Flicking#align align} 옵션에 사용되는 미리 정의된 리터럴 상수들을 담고 있는 객체
+ * @memberof Constants
+ * @type {object}
+ * @property {"prev"} PREV left/top align<ko>좌/상 정렬</ko>
+ * @property {"center"} CENTER center align<ko>중앙 정렬</ko>
+ * @property {"next"} NEXT right/bottom align<ko>우/하 정렬</ko>
+ */
 export const ALIGN = {
@@ -49,2 +79,13 @@ PREV: "prev",
 
+/**
+ * An object of directions
+ * @ko 방향을 나타내는 값들을 담고 있는 객체
+ * @memberof Constants
+ * @type {object}
+ * @property {"PREV"} PREV "left" when {@link Flicking#horizontal horizontal} is true, and "top" when {@link Flicking#horizontal horizontal} is false
+ * <ko>{@link Flicking#horizontal horizontal}가 `true`일 경우 왼쪽, {@link Flicking#horizontal horizontal}가 `false`일 경우 위쪽을 의미합니다</ko>
+ * @property {"NEXT"} NEXT "right" when {@link Flicking#horizontal horizontal} is true, and "bottom" when {@link Flicking#horizontal horizontal} is false
+ * <ko>{@link Flicking#horizontal horizontal}가 `true`일 경우 오른쪽, {@link Flicking#horizontal horizontal}가 `false`일 경우 아래쪽을 의미합니다</ko>
+ * @property {null} NONE This value usually means it's the same position<ko>주로 제자리인 경우를 의미합니다</ko>
+ */
 export const DIRECTION = {
@@ -56,2 +97,12 @@ PREV: "PREV",
 
+/**
+ * An object with all possible {@link Flicking#moveType moveType}s
+ * @ko Flicking이 제공하는 {@link Flicking#moveType moveType}들을 담고 있는 객체
+ * @memberof Constants
+ * @type {object}
+ * @property {"snap"} SNAP Flicking's {@link Flicking#moveType moveType} that enables {@link SnapControl} as a Flicking's {@link Flicking#control control}
+ * <ko>Flicking의 {@link Flicking#control control}을 {@link SnapControl}로 설정하게 하는 {@link Flicking#moveType moveType}</ko>
+ * @property {"freeScroll"} FREE_SCROLL Flicking's {@link Flicking#moveType moveType} that enables {@link FreeControl} as a Flicking's {@link Flicking#control control}
+ * <ko>Flicking의 {@link Flicking#control control}을 {@link FreeControl}로 설정하게 하는 {@link Flicking#moveType moveType}</ko>
+ */
 export const MOVE_TYPE = {
@@ -58,0 +109,0 @@ SNAP: "snap",

src/control/AxesController.ts

@@ -14,2 +14,7 @@ /*
 
+/**
+ * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events
+ * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 이벤트를 처리하는 컨트롤러 컴포넌트
+ * @internal
+ */
 class AxesController {
@@ -23,8 +28,42 @@ private _flicking: Flicking | null;
 
+  /**
+   * An {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance
+   * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes}의 인스턴스
+   * @type {Axes}
+   * @see https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html
+   * @readonly
+   */
   public get axes() { return this._axes; }
+  /**
+   * A activated {@link State} that shows the current status of the user input or the animation
+   * @ko 현재 활성화된 {@link State} 인스턴스로 사용자 입력 또는 애니메이션 상태를 나타냅니다
+   * @type {State}
+   */
   public get state() { return this._stateMachine.state; }
+  /**
+   * A context of the current animation playing
+   * @ko 현재 재생중인 애니메이션 정보
+   * @type {object}
+   * @property {number} start A start position of the animation<ko>애니메이션 시작 지점</ko>
+   * @property {number} end A end position of the animation<ko>애니메이션 끝 지점</ko>
+   * @property {number} offset camera offset<ko>카메라 오프셋</ko>
+   * @readonly
+   */
   public get animatingContext() { return this._animatingContext; }
+  /**
+   * A Boolean indicating whether the user input is enabled
+   * @ko 현재 사용자 입력이 활성화되었는지를 나타내는 값
+   * @type {boolean}
+   * @readonly
+   */
   public get enabled() { return this._panInput?.isEnable() ?? false; }
+  /**
+   * Current position value in {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance
+   * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} 인스턴스 내부의 현재 좌표 값
+   * @type {number}
+   * @readonly
+   */
   public get position() { return this._axes?.get([AXES.POSITION_KEY])[AXES.POSITION_KEY] ?? 0; }
 
+  /** */
   public constructor() {
@@ -35,3 +74,10 @@ this._resetInternalValues();
 
-  public init(flicking: Flicking) {
+  /**
+   * Initialize AxesController
+   * @ko AxesController를 초기화합니다
+   * @param {Flicking} flicking An instance of Flicking
+   * @chainable
+   * @return {this}
+   */
+  public init(flicking: Flicking): this {
     this._flicking = flicking;
@@ -70,4 +116,11 @@
     }
+
+    return this;
   }
 
+  /**
+   * Destroy AxesController and return to initial state
+   * @ko AxesController를 초기 상태로 되돌립니다
+   * @return {void}
+   */
   public destroy() {
@@ -82,2 +135,8 @@ this._axes?.destroy();
 
+  /**
+   * Enable input from the user (mouse/touch)
+   * @ko 사용자의 입력(마우스/터치)를 활성화합니다
+   * @chainable
+   * @return {this}
+   */
   public enable(): this {
@@ -89,2 +148,8 @@ this._panInput?.enable();
 
+  /**
+   * Disable input from the user (mouse/touch)
+   * @ko 사용자의 입력(마우스/터치)를 막습니다
+   * @chainable
+   * @return {this}
+   */
   public disable(): this {
@@ -96,2 +161,11 @@ this._panInput?.disable();
 
+  /**
+   * Update {@link https://naver.github.io/egjs-axes/ @egjs/axes}'s state
+   * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 상태를 갱신합니다
+   * @chainable
+   * @throws {FlickingError}
+   * {@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link AxesController#init init} is not called before
+   * <ko>{@link AxesController#init init}이 이전에 호출되지 않은 경우</ko>
+   * @return {this}
+   */
   public update(): this {
@@ -113,2 +187,23 @@ const flicking = getFlickingAttached(this._flicking, "Control");
 
+  /**
+   * Run Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#setTo setTo} using the given position
+   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#setTo setTo} 메소드를 주어진 좌표를 이용하여 수행합니다
+   * @param {number} position A position to move<ko>이동할 좌표</ko>
+   * @param {number} duration Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
+   * @param {number} [axesEvent] If provided, it'll use its {@link setTo} method instead
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * <ko>
+   *
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   *
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
+   */
   public animateTo(position: number, duration: number, axesEvent?: OnRelease): Promise<void> {
@@ -115,0 +210,0 @@ const axes = this._axes;

src/control/Control.ts

@@ -12,6 +12,11 @@ /*
 import AxesController from "~/control/AxesController";
-import { EVENTS } from "~/const/external";
+import { DIRECTION, EVENTS } from "~/const/external";
 import * as ERROR from "~/const/error";
 import { getDirection, getFlickingAttached } from "~/utils";
+import { ValueOf } from "~/type/internal";
 
+/**
+ * A component that manages inputs and animation of Flicking
+ * @ko Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트
+ */
 abstract class Control {
@@ -23,8 +28,41 @@ // Internal States
 
+  /**
+   * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events
+   * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 이벤트를 처리하는 컨트롤러 컴포넌트
+   * @type {AxesController}
+   * @readonly
+   */
   public get controller() { return this._controller; }
+  /**
+   * Index number of the {@link Flicking#currentPanel currentPanel}
+   * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
+   * @type {number}
+   * @default 0
+   * @readonly
+   */
   public get activeIndex() { return this._activePanel?.index ?? -1; }
+  /**
+   * Currently active panel
+   * @ko 현재 선택된 패널
+   * @type {Panel}
+   * @readonly
+   * @see Panel
+   */
   public get activePanel() { return this._activePanel; }
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {boolean}
+   * @readonly
+   */
   public get animating() { return this._controller.state.animating; }
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {boolean}
+   * @readonly
+   */
   public get holding() { return this._controller.state.holding; }
 
+  /** */
   public constructor() {
@@ -36,4 +74,52 @@ this._flicking = null;
 
+  /**
+   * Move {@link Camera} to the given position
+   * @ko {@link Camera}를 주어진 좌표로 이동합니다
+   * @method
+   * @abstract
+   * @memberof Control
+   * @instance
+   * @name moveToPosition
+   * @param {number} position The target position to move<ko>이동할 좌표</ko>
+   * @param {number} duration Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
+   * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
+   * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
+   * @fires Flicking#moveStart
+   * @fires Flicking#move
+   * @fires Flicking#moveEnd
+   * @fires Flicking#willChange
+   * @fires Flicking#changed
+   * @fires Flicking#willRestore
+   * @fires Flicking#restored
+   * @fires Flicking#needPanel
+   * @fires Flicking#visibleChange
+   * @fires Flicking#reachEdge
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|
+   * <ko>
+   *
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+   *
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
+   */
   public abstract moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;
 
+  /**
+   * Initialize Control
+   * @ko Control을 초기화합니다
+   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
+   * @chainable
+   * @return {this}
+   */
   public init(flicking: Flicking): this {
@@ -46,3 +132,8 @@ this._flicking = flicking;
 
-  public destroy(): this {
+  /**
+   * Destroy Control and return to initial state
+   * @ko Control을 초기 상태로 되돌립니다
+   * @return {void}
+   */
+  public destroy(): void {
     this._controller.destroy();
@@ -52,6 +143,10 @@
     this._activePanel = null;
-
-    return this;
   }
 
+  /**
+   * Enable input from the user (mouse/touch)
+   * @ko 사용자의 입력(마우스/터치)를 활성화합니다
+   * @chainable
+   * @return {this}
+   */
   public enable(): this {
@@ -63,2 +158,8 @@ this._controller.enable();
 
+  /**
+   * Disable input from the user (mouse/touch)
+   * @ko 사용자의 입력(마우스/터치)를 막습니다
+   * @chainable
+   * @return {this}
+   */
   public disable(): this {
@@ -70,2 +171,8 @@ this._controller.disable();
 
+  /**
+   * Update {@link Control#controller controller}'s state
+   * @ko {@link Control#controller controller}의 내부 상태를 갱신합니다
+   * @chainable
+   * @return {this}
+   */
   public updateInput(): this {
@@ -77,2 +184,8 @@ this._controller.update();
 
+  /**
+   * Reset {@link Control#activePanel activePanel} to `null`
+   * @ko {@link Control#activePanel activePanel}을 `null`로 초기화합니다
+   * @chainable
+   * @return {this}
+   */
   public resetActivePanel(): this {
@@ -84,3 +197,49 @@ this._activePanel = null;
 
-  public async moveToPanel(panel: Panel, duration: number, axesEvent?: OnRelease) {
+  /**
+   * Move {@link Camera} to the given panel
+   * @ko {@link Camera}를 해당 패널 위로 이동합니다
+   * @param {Panel} panel The target panel to move<ko>이동할 패널</ko>
+   * @param {object} options An options object<ko>옵션 오브젝트</ko>
+   * @param {number} duration Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
+   * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
+   * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
+   * @param {Constants.DIRECTION} [direction=DIRECTION.NONE] Direction to move, only available in the {@link Flicking#circular circular} mode<ko>이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다</ko>
+   * @fires Flicking#moveStart
+   * @fires Flicking#move
+   * @fires Flicking#moveEnd
+   * @fires Flicking#willChange
+   * @fires Flicking#changed
+   * @fires Flicking#willRestore
+   * @fires Flicking#restored
+   * @fires Flicking#needPanel
+   * @fires Flicking#visibleChange
+   * @fires Flicking#reachEdge
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|
+   * <ko>
+   *
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+   *
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the target panel<ko>해당 패널 도달시에 resolve되는 Promise</ko>
+   */
+  public async moveToPanel(panel: Panel, {
+    duration,
+    direction = DIRECTION.NONE,
+    axesEvent
+  }: {
+    duration: number;
+    direction?: ValueOf<typeof DIRECTION>;
+    axesEvent?: OnRelease;
+  }) {
     const flicking = getFlickingAttached(this._flicking, "Control");
@@ -94,3 +253,3 @@ const camera = flicking.camera;
 
-      if (!nearestAnchor) {
+      if (panel.removed || !nearestAnchor) {
         return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(panel.position), ERROR.CODE.POSITION_NOT_REACHABLE));
@@ -102,2 +261,22 @@ }
       panel = nearestAnchor.panel;
+    } else if (camera.controlParams.circular) {
+      // Circular mode is enabled, find nearest distance to panel
+      const camPos = this._controller.position; // Actual position of the Axes
+      const camRangeDiff = camera.rangeDiff;
+      const possiblePositions = [position, position + camRangeDiff, position - camRangeDiff]
+        .filter(pos => {
+          if (direction === DIRECTION.NONE) return true;
+
+          return direction === DIRECTION.PREV
+            ? pos <= camPos
+            : pos >= camPos;
+        });
+
+      position = possiblePositions.reduce((nearestPosition, pos) => {
+        if (Math.abs(camPos - pos) < Math.abs(camPos - nearestPosition)) {
+          return pos;
+        } else {
+          return nearestPosition;
+        }
+      }, Infinity);
     }
@@ -112,3 +291,3 @@
     const flicking = getFlickingAttached(this._flicking, "Control");
-    const triggeringEvent = panel !== this._activePanel ? EVENTS.CHANGE : EVENTS.RESTORE;
+    const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
     const camera = flicking.camera;
@@ -141,14 +320,33 @@ const activePanel = this._activePanel;
   }) {
+    const currentPanel = this._activePanel;
     const animate = () => this._controller.animateTo(position, duration, axesEvent);
+    const isTrusted = axesEvent?.isTrusted || false;
 
     if (duration === 0) {
-      this._setActivePanel(newActivePanel);
+      this._setActivePanel(newActivePanel, currentPanel, isTrusted);
       return animate();
     } else {
-      return animate().then(() => this._setActivePanel(newActivePanel));
+      return animate().then(() => this._setActivePanel(newActivePanel, currentPanel, isTrusted));
     }
   }
 
-  protected _setActivePanel = (panel: Panel) => {
-    this._activePanel = panel;
+  protected _setActivePanel = (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => {
+    const flicking = getFlickingAttached(this._flicking, "Control");
+
+    this._activePanel = newActivePanel;
+
+    if (newActivePanel !== prevActivePanel) {
+      flicking.trigger(new ComponentEvent(EVENTS.CHANGED, {
+        index: newActivePanel.index,
+        panel: newActivePanel,
+        prevIndex: prevActivePanel?.index ?? -1,
+        prevPanel: prevActivePanel,
+        isTrusted,
+        direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE
+      }));
+    } else {
+      flicking.trigger(new ComponentEvent(EVENTS.RESTORED, {
+        isTrusted
+      }));
+    }
   };
@@ -155,0 +353,0 @@ }

src/control/FreeControl.ts

@@ -12,3 +12,43 @@ /*
 
+/**
+ * A {@link Control} that can be scrolled freely without alignment
+ * @ko 패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식을 사용하는 {@link Control}
+ */
 class FreeControl extends Control {
+  /**
+   * Move {@link Camera} to the given position
+   * @ko {@link Camera}를 주어진 좌표로 이동합니다
+   * @param {number} position The target position to move<ko>이동할 좌표</ko>
+   * @param {number} duration Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
+   * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
+   * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
+   * @fires Flicking#moveStart
+   * @fires Flicking#move
+   * @fires Flicking#moveEnd
+   * @fires Flicking#willChange
+   * @fires Flicking#changed
+   * @fires Flicking#willRestore
+   * @fires Flicking#restored
+   * @fires Flicking#needPanel
+   * @fires Flicking#visibleChange
+   * @fires Flicking#reachEdge
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|
+   * <ko>
+   *
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+   *
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
+   */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
@@ -21,3 +61,2 @@ const flicking = getFlickingAttached(this._flicking, "Control");
     const anchorAtPosition = camera.findAnchorIncludePosition(targetPos);
-    const activePanel = this._activePanel;
 
@@ -29,5 +68,3 @@ if (!anchorAtPosition) {
     const targetPanel = anchorAtPosition.panel;
-    if (targetPanel !== activePanel) {
-      this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
-    }
+    this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
 
@@ -34,0 +71,0 @@ return this._animateToPosition({ position, duration, newActivePanel: targetPanel, axesEvent });

src/control/index.ts

@@ -8,2 +8,10 @@ /*
 import FreeControl from "./FreeControl";
+import AxesController from "./AxesController";
+import State from "./states/State";
+import IdleState from "./states/IdleState";
+import HoldingState from "./states/HoldingState";
+import DraggingState from "./states/DraggingState";
+import AnimatingState from "./states/AnimatingState";
+import DisabledState from "./states/DisabledState";
+import StateMachine from "./StateMachine";
 
@@ -13,3 +21,11 @@ export {
   SnapControl,
-  FreeControl
+  FreeControl,
+  AxesController,
+  State,
+  IdleState,
+  HoldingState,
+  DraggingState,
+  AnimatingState,
+  DisabledState,
+  StateMachine
 };

src/control/SnapControl.ts

@@ -13,3 +13,43 @@ /*
 
+/**
+ * A {@link Control} that uses a release momentum to choose destination panel
+ * @ko 입력을 중단한 시점의 가속도에 영향받아 도달할 패널을 계산하는 이동 방식을 사용하는 {@link Control}
+ */
 class SnapControl extends Control {
+  /**
+   * Move {@link Camera} to the given position
+   * @ko {@link Camera}를 주어진 좌표로 이동합니다
+   * @param {number} position The target position to move<ko>이동할 좌표</ko>
+   * @param {number} duration Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
+   * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
+   * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
+   * @fires Flicking#moveStart
+   * @fires Flicking#move
+   * @fires Flicking#moveEnd
+   * @fires Flicking#willChange
+   * @fires Flicking#changed
+   * @fires Flicking#willRestore
+   * @fires Flicking#restored
+   * @fires Flicking#needPanel
+   * @fires Flicking#visibleChange
+   * @fires Flicking#reachEdge
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|
+   * <ko>
+   *
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|
+   * |{@link Constants.ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+   *
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
+   */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
@@ -16,0 +56,0 @@ const flicking = getFlickingAttached(this._flicking, "Control");

src/control/StateMachine.ts

@@ -17,2 +17,5 @@ /*
 
+/**
+ * @internal
+ */
 class StateMachine {
@@ -19,0 +22,0 @@ private _state: State;

src/control/states/AnimatingState.ts

@@ -11,4 +11,21 @@ /*
 
+/**
+ * A state that activates when Flicking's animating by user input or method call
+ * @ko 사용자 입력이나 메소드 호출에 의해 Flicking의 애니메이션이 동작중인 상태
+ * @internal
+ */
 class AnimatingState extends State {
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {false}
+   * @readonly
+   */
   public readonly holding = false;
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {true}
+   * @readonly
+   */
   public readonly animating = true;
@@ -15,0 +32,0 @@

src/control/states/DisabledState.ts

@@ -7,4 +7,21 @@ /*
 
+/**
+ * A state that activates when Flicking is stopped by event's `stop` method
+ * @ko 이벤트의 `stop`호출에 의해 Flicking이 정지된 상태
+ * @internal
+ */
 class DisabledState extends State {
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {false}
+   * @readonly
+   */
   public readonly holding = false;
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {true}
+   * @readonly
+   */
   public readonly animating = true;
@@ -11,0 +28,0 @@

src/control/states/DraggingState.ts

@@ -12,4 +12,21 @@ /*
 
+/**
+ * A state that activates when user's dragging the Flicking area
+ * @ko 사용자가 드래깅중인 상태
+ * @internal
+ */
 class DraggingState extends State {
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {true}
+   * @readonly
+   */
   public readonly holding = true;
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {true}
+   * @readonly
+   */
   public readonly animating = true;
@@ -16,0 +33,0 @@

src/control/states/HoldingState.ts

@@ -13,5 +13,22 @@ /*
 
+/**
+ * A state that activates when user's holding the Flicking area, but not moved a single pixel yet
+ * @ko 사용자의 입력이 시작되었으나, 아직 움직이지는 않은 상태
+ * @internal
+ */
 class HoldingState extends State {
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {true}
+   * @readonly
+   */
   public readonly holding = true;
-  public readonly animating = true;
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {false}
+   * @readonly
+   */
+  public readonly animating = false;
 
@@ -18,0 +35,0 @@ private _releaseEvent: OnRelease | null = null;

src/control/states/IdleState.ts

@@ -11,4 +11,21 @@ /*
 
+/**
+ * A default state when there's no user input and no animation's playing
+ * @ko 사용자의 입력이 없고, 애니메이션이 동작하고있지 않은 기본 상태
+ * @internal
+ */
 class IdleState extends State {
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {false}
+   * @readonly
+   */
   public readonly holding = false;
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {false}
+   * @readonly
+   */
   public readonly animating = false;
@@ -15,0 +32,0 @@

src/control/states/State.ts

@@ -18,6 +18,33 @@ /*
 
+/**
+ * A component that shows the current status of the user input or the animation
+ * @ko 현재 사용자 입력 또는 애니메이션 상태를 나타내는 컴포넌트
+ * @internal
+ */
 abstract class State {
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {boolean}
+   * @readonly
+   */
   public abstract readonly holding: boolean;
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {boolean}
+   * @readonly
+   */
   public abstract readonly animating: boolean;
 
+  /**
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} event
+   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} 이벤트 핸들러
+   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
+   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
+   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} event of Axes
+   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} 이벤트</ko>
+   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
+   * @return {void}
+   */
   public onHold(ctx: {
@@ -31,2 +58,12 @@ flicking: Flicking;
 
+  /**
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event
+   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트 핸들러
+   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
+   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
+   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event of Axes
+   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트</ko>
+   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
+   * @return {void}
+   */
   public onChange(ctx: {
@@ -40,2 +77,12 @@ flicking: Flicking;
 
+  /**
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event
+   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트 핸들러
+   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
+   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
+   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of Axes
+   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
+   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
+   * @return {void}
+   */
   public onRelease(ctx: {
@@ -49,2 +96,12 @@ flicking: Flicking;
 
+  /**
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} event
+   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} 이벤트 핸들러
+   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
+   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
+   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} event of Axes
+   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} 이벤트</ko>
+   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
+   * @return {void}
+   */
   public onAnimationEnd(ctx: {
@@ -58,2 +115,11 @@ flicking: Flicking;
 
+  /**
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} event
+   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} 이벤트 핸들러
+   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
+   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
+   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} event of Axes<ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} 이벤트</ko>
+   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
+   * @return {void}
+   */
   public onFinish(ctx: {
@@ -60,0 +126,0 @@ flicking: Flicking;

src/core/AnchorPoint.ts

 import Panel from "./Panel";
 
+/**
+ * A data component that has actual position where the camera should be stopped at
+ * @ko 카메라가 정지해야하는 실제 위치를 담고 있는 데이터 컴포넌트
+ */
 class AnchorPoint {
@@ -8,6 +12,30 @@ private _index: number;
 
+  /**
+   * Index of AnchorPoint
+   * @ko AnchorPoint의 인덱스
+   * @type {number}
+   * @readonly
+   */
   public get index() { return this._index; }
+  /**
+   * Position of AnchorPoint
+   * @ko AnchorPoint의 좌표
+   * @type {number}
+   * @readonly
+   */
   public get position() { return this._pos; }
+  /**
+   * A {@link Panel} instance AnchorPoint is referencing to
+   * @ko AnchorPoint가 참조하고 있는 {@link Panel}
+   * @type {Panel}
+   * @readonly
+   */
   public get panel() { return this._panel; }
 
+  /**
+   * @param {object} options An options object<ko>옵션 객체</ko>
+   * @param {number} [options.index] Index of AnchorPoint<ko>AnchorPoint의 인덱스</ko>
+   * @param {number} [options.position] Position of AnchorPoint<ko>AnchorPoint의 좌표</ko>
+   * @param {Panel} [options.panel] A {@link Panel} instance AnchorPoint is referencing to<ko>AnchorPoint가 참조하고 있는 {@link Panel}</ko>
+   */
   public constructor({
@@ -14,0 +42,0 @@ index,

src/core/FlickingError.ts

@@ -5,3 +5,26 @@ /*
  */
+
+/**
+ * Special type of known error that {@link Flicking} throws.
+ * @ko Flicking 내부에서 알려진 오류 발생시 throw되는 에러
+ * @property {number} code Error code<ko>에러 코드</ko>
+ * @property {string} message Error message<ko>에러 메시지</ko>
+ * @see {@link Constants.ERROR_CODE ERROR_CODE}
+ * @example
+ * ```ts
+ * import Flicking, { FlickingError, ERROR_CODES } from "@egjs/flicking";
+ * try {
+ *   const flicking = new Flicking(".flicking-viewport")
+ * } catch (e) {
+ *   if (e instanceof FlickingError && e.code === ERROR_CODES.ELEMENT_NOT_FOUND) {
+ *     console.error("Element not found")
+ *   }
+ * }
+ * ```
+ */
 class FlickingError extends Error {
+  /**
+   * @param message Error message<ko>에러 메시지</ko>
+   * @param code Error code<ko>에러 코드</ko>
+   */
   public constructor(
@@ -8,0 +31,0 @@ public message: string,

src/core/Panel.ts

@@ -17,2 +17,6 @@ /*
 
+/**
+ * An slide data component that holds information of a single HTMLElement
+ * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
+ */
 class Panel {
@@ -34,15 +38,97 @@ private _flicking: Flicking;
   // Internal States Getter
+  /**
+   * `HTMLElement` that panel's referencing
+   * @ko 패널이 참조하고 있는 `HTMLElement`
+   * @type {HTMLElement}
+   * @readonly
+   */
   public get element() { return this._el; }
+  /**
+   * Index of the panel
+   * @ko 패널의 인덱스
+   * @type {number}
+   * @readonly
+   */
   public get index() { return this._index; }
+  /**
+   * Position of the panel, including {@link Panel#alignPosition alignPosition}
+   * @ko 패널의 현재 좌표, {@link Panel#alignPosition alignPosition}을 포함하고 있습니다
+   * @type {number}
+   * @readonly
+   */
   public get position() { return this._pos + this._alignPos; }
+  /**
+   * Cached size of the panel element
+   * This is equal to {@link Panel#element element}'s `offsetWidth` if {@link Flicking#horizontal horizontal} is `true`, and `offsetHeight` else
+   * @ko 패널 엘리먼트의 캐시된 크기
+   * 이 값은 {@link Flicking#horizontal horizontal}이 `true`일 경우 {@link Panel#element element}의 `offsetWidth`와 동일하고, `false`일 경우 `offsetHeight`와 동일합니다
+   * @type {number}
+   * @readonly
+   */
   public get size() { return this._size; }
+  /**
+   * Panel's size including CSS `margin`
+   * This value includes {@link Panel#element element}'s margin left/right if {@link Flicking#horizontal horizontal} is `true`, and margin top/bottom else
+   * @ko CSS `margin`을 포함한 패널의 크기
+   * 이 값은 {@link Flicking#horizontal horizontal}이 `true`일 경우 margin left/right을 포함하고, `false`일 경우 margin top/bottom을 포함합니다
+   * @type {number}
+   * @readonly
+   */
   public get sizeIncludingMargin() { return this._size + this._margin.prev + this._margin.next; }
+  /**
+   * Height of the panel element
+   * @ko 패널 엘리먼트의 높이
+   * @type {number}
+   * @readonly
+   */
   public get height() { return this._height; }
+  /**
+   * Cached CSS `margin` value of the panel element
+   * @ko 패널 엘리먼트의 CSS `margin` 값
+   * @type {object}
+   * @property {number} prev CSS `margin-left` when the {@link Flicking#horizontal horizontal} is `true`, and `margin-top` else
+   * <ko>{@link Flicking#horizontal horizontal}이 `true`일 경우 `margin-left`, `false`일 경우 `margin-top`에 해당하는 값</ko>
+   * @property {number} next CSS `margin-right` when the {@link Flicking#horizontal horizontal} is `true`, and `margin-bottom` else
+   * <ko>{@link Flicking#horizontal horizontal}이 `true`일 경우 `margin-right`, `false`일 경우 `margin-bottom`에 해당하는 값</ko>
+   * @readonly
+   */
   public get margin() { return this._margin; }
+  /**
+   * Align position inside the panel where {@link Camera}'s {@link Camera#alignPosition alignPosition} inside viewport should be located at
+   * @ko 패널의 정렬 기준 위치. {@link Camera}의 뷰포트 내에서의 {@link Camera#alignPosition alignPosition}이 위치해야 하는 곳입니다
+   * @type {number}
+   * @readonly
+   */
   public get alignPosition() { return this._alignPos; }
+  /**
+   * Panel's position offset which is changed after panel element's order changes if {@link Flicking#circular circular} is enabled
+   * @ko 현재 패널의 위치 오프셋 값. {@link Flicking#circular circular} 모드에서 패널의 엘리먼트의 순서가 변경될 때 이 값이 변경됩니다
+   * @type {number}
+   * @default 0
+   * @readonly
+   */
   public get offset() { return this._offset; }
+  /**
+   * A value indicating whether the panel's {@link Flicking#remove remove}d
+   * @ko 패널이 {@link Flicking#remove remove}되었는지 여부를 나타내는 값
+   * @type {boolean}
+   * @readonly
+   */
   public get removed() { return this._removed; }
+  /**
+   * Panel element's range of the bounding box
+   * @ko 패널 엘리먼트의 Bounding box 범위
+   * @type {object}
+   * @property {number} [min] Bounding box's left({@link Flicking#horizontal horizontal}: true) / top({@link Flicking#horizontal horizontal}: false)
+   * @property {number} [max] Bounding box's right({@link Flicking#horizontal horizontal}: true) / bottom({@link Flicking#horizontal horizontal}: false)
+   * @readonly
+   */
   public get range() { return { min: this._pos, max: this._pos + this._size }; }
 
   // Options Getter
+  /**
+   * A value indicating where the {@link Panel#alignPosition alignPosition} should be located at inside the panel element
+   * @ko {@link Panel#alignPosition alignPosition}이 패널 내의 어디에 위치해야 하는지를 나타내는 값
+   * @type {Constants.ALIGN | string | number}
+   */
   public get align() { return this._align; }
@@ -53,2 +139,9 @@
 
+  /**
+   * @param {object} options An options object<ko>옵션 오브젝트</ko>
+   * @param {HTMLElement} [options.el] A `HTMLElement` panel's referencing<ko>패널이 참조하는 `HTMLElement`</ko>
+   * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
+   * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
+   * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
+   */
   public constructor({
@@ -70,2 +163,8 @@ el,
 
+  /**
+   * Update size of the panel
+   * @ko 패널의 크기를 갱신합니다
+   * @chainable
+   * @return {this}
+   */
   public resize(): this {
@@ -100,2 +199,8 @@ const el = this._el;
 
+  /**
+   * Check whether the given element is inside of this panel's {@link Panel#element element}
+   * @ko 해당 엘리먼트가 이 패널의 {@link Panel#element element} 내에 포함되어 있는지를 반환합니다
+   * @param {HTMLElement} element The HTMLElement to check<ko>확인하고자 하는 HTMLElement</ko>
+   * @return {boolean} A Boolean value indicating the element is inside of this panel {@link Panel#element element}<ko>패널의 {@link Panel#element element}내에 해당 엘리먼트 포함 여부</ko>
+   */
   public contains(element: HTMLElement): boolean {
@@ -105,2 +210,7 @@ return this._el.contains(element);
 
+  /**
+   * Reset internal state and set {@link Panel#removed removed} to `true`
+   * @ko 내부 상태를 초기화하고 {@link Panel#removed removed}를 `true`로 설정합니다.
+   * @return {void}
+   */
   public destroy(): void {
@@ -111,2 +221,9 @@ this._resetInternalStates();
 
+  /**
+   * Check whether the given position is inside of this panel's {@link Panel#range range}
+   * @ko 주어진 좌표가 현재 패널의 {@link Panel#range range}내에 속해있는지를 반환합니다.
+   * @param {number} pos A position to check<ko>확인하고자 하는 좌표</ko>
+   * @param {boolean} [includeMargin=false] Include {@link margin} to the range<ko>패널 영역에 {@link margin}값을 포함시킵니다</ko>
+   * @return {boolean} A Boolean value indicating whether the given position is included in the panel range<ko>해당 좌표가 패널 영역 내에 속해있는지 여부</ko>
+   */
   public includePosition(pos: number, includeMargin: boolean = false): boolean {
@@ -116,2 +233,10 @@ return this.includeRange(pos, pos, includeMargin);
 
+  /**
+   * Check whether the given range is fully included in this panel's area
+   * @ko 주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다
+   * @param {number} min Minimum value of the range to check<ko>확인하고자 하는 최소 범위</ko>
+   * @param {number} max Maximum value of the range to check<ko>확인하고자 하는 최대 범위</ko>
+   * @param {boolean} [includeMargin=false] Include {@link margin} to the range<ko>패널 영역에 {@link margin}값을 포함시킵니다</ko>
+   * @returns {boolean} A Boolean value indicating whether the given range is fully included in the panel range<ko>해당 범위가 패널 영역 내에 완전히 속해있는지 여부</ko>
+   */
   public includeRange(min: number, max: number, includeMargin: boolean = false): boolean {
@@ -129,2 +254,8 @@ const margin = this._margin;
 
+  /**
+   * Move {@link Camera} to this panel
+   * @ko {@link Camera}를 이 패널로 이동합니다
+   * @param {number} [duration] Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
+   * @returns {Promise<void>} A Promise which will be resolved after reaching the panel<ko>패널 도달시에 resolve되는 Promise</ko>
+   */
   public focus(duration?: number) {
@@ -134,2 +265,9 @@ return this._flicking.moveTo(this._index, duration);
 
+  /**
+   * Get previous(`index - 1`) panel. When the previous panel does not exist, this will return `null` instead
+   * If the {@link Flicking#circularEnabled circular} is enabled, this will return the last panel if called from the first panel
+   * @ko 이전(`index - 1`) 패널을 반환합니다. 이전 패널이 없을 경우 `null`을 반환합니다
+   * {@link Flicking#circularEnabled circular} 모드가 활성화되었을 때 첫번째 패널에서 이 메소드를 호출할 경우 마지막 패널을 반환합니다
+   * @returns {Panel | null} The previous panel<ko>이전 패널</ko>
+   */
   public prev(): Panel | null {
@@ -148,2 +286,9 @@ const index = this._index;
 
+  /**
+   * Get next(`index + 1`) panel. When the next panel does not exist, this will return `null` instead
+   * If the {@link Flicking#circularEnabled circular} is enabled, this will return the first panel if called from the last panel
+   * @ko 다음(`index + 1`) 패널을 반환합니다. 다음 패널이 없을 경우 `null`을 반환합니다
+   * {@link Flicking#circularEnabled circular} 모드가 활성화되었을 때 마지막 패널에서 이 메소드를 호출할 경우 첫번째 패널을 반환합니다
+   * @returns {Panel | null} The previous panel<ko>다음 패널</ko>
+   */
   public next(): Panel | null {
@@ -162,2 +307,10 @@ const index = this._index;
 
+  /**
+   * Increase panel's index by the given value
+   * @ko 패널의 인덱스를 주어진 값만큼 증가시킵니다
+   * @internal
+   * @chainable
+   * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
+   * @returns {this}
+   */
   public increaseIndex(val: number): this {
@@ -168,2 +321,10 @@ this._index += Math.max(val, 0);
 
+  /**
+   * Decrease panel's index by the given value
+   * @ko 패널의 인덱스를 주어진 값만큼 감소시킵니다
+   * @internal
+   * @chainable
+   * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
+   * @returns {this}
+   */
   public decreaseIndex(val: number): this {
@@ -174,2 +335,10 @@ this._index -= Math.max(val, 0);
 
+  /**
+   * Increase panel's position by the given value
+   * @ko 패널의 위치를 주어진 값만큼 증가시킵니다
+   * @internal
+   * @chainable
+   * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
+   * @returns {this}
+   */
   public increasePosition(val: number): this {
@@ -180,2 +349,10 @@ this._moveBy(Math.max(val, 0));
 
+  /**
+   * Decrease panel's position by the given value
+   * @ko 패널의위치를 주어진 값만큼 감소시킵니다
+   * @internal
+   * @chainable
+   * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
+   * @returns {this}
+   */
   public decreasePosition(val: number): this {
@@ -186,2 +363,10 @@ this._moveBy(-Math.max(val, 0));
 
+  /**
+   * Increase panel's offset by the given value
+   * @ko 패널의 오프셋을 주어진 값만큼 증가시킵니다
+   * @internal
+   * @chainable
+   * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
+   * @returns {this}
+   */
   public increaseOffset(val: number): this {
@@ -192,2 +377,10 @@ this._offset += Math.max(val, 0);
 
+  /**
+   * Decrease panel's offset by the given value
+   * @ko 패널의 오프셋을 주어진 값만큼 감소시킵니다
+   * @internal
+   * @chainable
+   * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
+   * @returns {this}
+   */
   public decreaseOffset(val: number): this {
@@ -198,2 +391,9 @@ this._offset -= Math.max(val, 0);
 
+  /**
+   * Reset panel's offset to 0
+   * @ko 패널의 오프셋을 0으로 초기화합니다
+   * @internal
+   * @chainable
+   * @returns {this}
+   */
   public resetOffset(): this {
@@ -200,0 +400,0 @@ this._offset = 0;

src/core/Viewport.ts

@@ -7,2 +7,6 @@ /*
 
+/**
+ * A component that manages viewport size
+ * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
+ */
 class Viewport {
@@ -13,7 +17,28 @@ private _el: HTMLElement;
 
+  /**
+   * A viewport(root) element
+   * @ko 뷰포트(root) 엘리먼트
+   * @type {HTMLElement}
+   * @readonly
+   */
   public get element() { return this._el; }
 
+  /**
+   * Viewport width
+   * @ko 뷰포트 너비
+   * @type {number}
+   * @readonly
+   */
   public get width() { return this._width; }
+  /**
+   * Viewport height
+   * @ko 뷰포트 높이
+   * @type {number}
+   * @readonly
+   */
   public get height() { return this._height; }
 
+  /**
+   * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
+   */
   public constructor(el: HTMLElement) {
@@ -25,12 +50,10 @@ this._el = el;
 
-  public destroy(): this {
-    return this;
-  }
-
   /**
-   * Change viewport's size. This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property.
-   *
-   * @param {object} [size] New viewport size
-   * @param {number|string} [size.width] CSS string or number(in px)
-   * @param {number|string} [size.height] CSS string or number(in px)
+   * Change viewport's size.
+   * This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property
+   * @ko 뷰포트 크기를 변경합니다.
+   * `.flicking-viewport` 엘리먼트에 해당 크기의 CSS width/height를 적용합니다
+   * @param {object} [size] New viewport size<ko>새 뷰포트 크기</ko>
+   * @param {number|string} [size.width] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
+   * @param {number|string} [size.height] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
    */
@@ -54,2 +77,6 @@ public setSize({
 
+  /**
+   * Update width/height to the current viewport element's size
+   * @ko 현재 뷰포트 엘리먼트의 크기로 너비/높이를 업데이트합니다
+   */
   public resize() {
@@ -56,0 +83,0 @@ const el = this._el;

src/Flicking.ts

@@ -6,3 +6,2 @@ /*
 import Component, { ComponentEvent } from "@egjs/component";
-import ImReady from "@egjs/imready";
 
@@ -15,13 +14,16 @@ import FlickingError from "./core/FlickingError";
 import { RawRenderer, Renderer, RendererOptions, VisibleRenderer } from "./renderer";
-import ExternalManipulator from "./renderer/ExternalManipulator";
+import OffsetManipulator from "./renderer/OffsetManipulator";
 import ElementManipulator from "./renderer/ElementManipulator";
-import OffsetManipulator from "./renderer/OffsetManipulator";
+import OrderManipulator from "./renderer/OrderManipulator";
 
-import { EVENTS, ALIGN, MOVE_TYPE } from "~/const/external";
+import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "~/const/external";
 import * as ERROR from "~/const/error";
 import { getElement, includes } from "~/utils";
-import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, ChangeEvent, RestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent } from "~/type/event";
+import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, WillChangeEvent, WillRestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent, ChangedEvent, RestoredEvent } from "~/type/event";
 import { LiteralUnion, ValueOf } from "~/type/internal";
 import { ElementLike } from "~/type/external";
 
+/**
+ * @interface
+ */
 export interface FlickingEvents {
@@ -36,4 +38,6 @@ [EVENTS.READY]: ReadyEvent;
   [EVENTS.MOVE_END]: MoveEndEvent;
-  [EVENTS.CHANGE]: ChangeEvent;
-  [EVENTS.RESTORE]: RestoreEvent;
+  [EVENTS.WILL_CHANGE]: WillChangeEvent;
+  [EVENTS.CHANGED]: ChangedEvent;
+  [EVENTS.WILL_RESTORE]: WillRestoreEvent;
+  [EVENTS.RESTORED]: RestoredEvent;
   [EVENTS.SELECT]: SelectEvent;
@@ -46,33 +50,3 @@ [EVENTS.NEED_PANEL]: NeedPanelEvent;
 /**
- * @param element A base element for the eg.Flicking module. When specifying a value as a `string` type, you must specify a css selector string to select the element.<ko>eg.Flicking 모듈을 사용할 기준 요소. `string`타입으로 값 지정시 요소를 선택하기 위한 css 선택자 문자열을 지정해야 한다.</ko>
- * @param options An option object of the eg.Flicking module<ko>eg.Flicking 모듈의 옵션 객체</ko>
- * @param {$ts:FlickingOptions["deceleration"]} [options.deceleration=0.0075] Deceleration value for panel movement animation for animation triggered by manual user input. A higher value means a shorter running time.<ko>사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.</ko>
- * @param {boolean} [options.horizontal=true] The direction of panel movement. (true: horizontal, false: vertical)<ko>패널 이동 방향. (true: 가로방향, false: 세로방향)</ko>
- * @param {boolean} [options.circular=false] Enables circular mode, which connects first/last panel for continuous scrolling.<ko>순환 모드를 활성화한다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능하다.</ko>
- * @param {boolean} [options.infinite=false] Enables infinite mode, which can automatically trigger needPanel until reaching the last panel's index reaches the lastIndex.<ko>무한 모드를 활성화한다. 무한 모드에서는 needPanel 이벤트를 자동으로 트리거한다. 해당 동작은 마지막 패널의 인덱스가 lastIndex와 일치할때까지 일어난다.</ko>
- * @param {number} [options.infiniteThreshold=0] A Threshold from viewport edge before triggering `needPanel` event in infinite mode.<ko>무한 모드에서 `needPanel`이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리.</ko>
- * @param {number} [options.lastIndex=Infinity] Maximum panel index that Flicking can set. Flicking won't trigger `needPanel` when the event's panel index is greater than it.<br/>Also, if the last panel's index reached a given index, you can't add more panels.<ko>Flicking이 설정 가능한 패널의 최대 인덱스. `needPanel` 이벤트에 지정된 인덱스가 최대 패널의 개수보다 같거나 커야 하는 경우에 이벤트를 트리거하지 않게 한다.<br>또한, 마지막 패널의 인덱스가 주어진 인덱스와 동일할 경우, 새로운 패널을 더 이상 추가할 수 없다.</ko>
- * @param {number} [options.threshold=40] Movement threshold to change panel(unit: pixel). It should be dragged above the threshold to change the current panel.<ko>패널 변경을 위한 이동 임계값 (단위: 픽셀). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.</ko>
- * @param {number} [options.duration=100] Duration of the panel movement animation. (unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
- * @param {function} [options.panelEffect=x => 1 - Math.pow(1 - x, 3)] An easing function applied to the panel movement animation. Default value is `easeOutCubic`.<ko>패널 이동 애니메이션에 적용할 easing함수. 기본값은 `easeOutCubic`이다.</ko>
- * @param {number} [options.defaultIndex=0] Index of the panel to set as default when initializing. A zero-based integer.<ko>초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.</ko>
- * @param {string[]} [options.inputType=["touch","mouse"]] Types of input devices to enable.({@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption Reference})<ko>활성화할 입력 장치 종류. ({@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption 참고})</ko>
- * @param {number} [options.thresholdAngle=45] The threshold angle value(0 ~ 90).<br>If the input angle from click/touched position is above or below this value in horizontal and vertical mode each, scrolling won't happen.<ko>스크롤 동작을 막기 위한 임계각(0 ~ 90).<br>클릭/터치한 지점으로부터 계산된 사용자 입력의 각도가 horizontal/vertical 모드에서 각각 크거나 작으면, 스크롤 동작이 이루어지지 않는다.</ko>
- * @param {number|string|number[]|string[]} [options.bounce=[10,10]] The size value of the bounce area. Only can be enabled when `circular=false`.<br>You can set different bounce value for prev/next direction by using array.<br>`number` for px value, and `string` for px, and % value relative to viewport size.(ex - 0, "10px", "20%")<ko>바운스 영역의 크기값. `circular=false`인 경우에만 사용할 수 있다.<br>배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정 가능하다.<br>`number`를 통해 px값을, `stirng`을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있다.(ex - 0, "10px", "20%")</ko>
- * @param {boolean} [options.autoResize=false] Whether the `resize` method should be called automatically after a window resize event.<ko>window의 `resize` 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.</ko>
- * @param {boolean} [options.adaptive=false] Whether the height(horizontal)/width(vertical) of the viewport element reflects the height/width value of the panel after completing the movement.<ko>목적 패널로 이동한 후 그 패널의 높이(horizontal)/너비(vertical)값을 뷰포트 요소의 높이/너비값에 반영할지 여부.</ko>
- * @param {number|""} [options.zIndex=2000] z-index value for viewport element.<ko>뷰포트 엘리먼트의 z-index 값.</ko>
- * @param {boolean} [options.bound=false] Prevent the view from going out of the first/last panel. Only can be enabled when `circular=false`.<ko>뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. `circular=false`인 경우에만 사용할 수 있다.</ko>
- * @param {boolean} [options.overflow=false] Disables CSS property `overflow: hidden` in viewport if `true`.<ko>`true`로 설정시 뷰포트에 `overflow: hidden` 속성을 해제한다.</ko>
- * @param {string} [options.hanger="50%"] The reference position of the hanger in the viewport, which hangs panel anchors should be stopped at.<br>It should be provided in px or % value of viewport size.<br>You can combinate those values with plus/minus sign.<br>ex) "50", "100px", "0%", "25% + 100px"<ko>뷰포트 내부의 행어의 위치. 패널의 앵커들이 뷰포트 내에서 멈추는 지점에 해당한다.<br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
- * @param {string} [options.anchor="50%"] The reference position of the anchor in panels, which can be hanged by viewport hanger.<br>It should be provided in px or % value of panel size.<br>You can combinate those values with plus/minus sign.<br>ex) "50", "100px", "0%", "25% + 100px"<ko>패널 내부의 앵커의 위치. 뷰포트의 행어와 연계하여 패널이 화면 내에서 멈추는 지점을 설정할 수 있다.<br>px값이나, 패널의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
- * @param {number} [options.gap=0] Space value between panels. Should be given in number.(px)<ko>패널간에 부여할 간격의 크기를 나타내는 숫자.(px)</ko>
- * @param {eg.Flicking.MoveTypeOption} [options.moveType="snap"] Movement style by user input. (ex: snap, freeScroll)<ko>사용자 입력에 의한 이동 방식.(ex: snap, freeScroll)</ko>
- * @param {boolean} [options.useOffset=false] Whether to use `offsetWidth`/`offsetHeight` instead of `getBoundingClientRect` for panel/viewport size calculation.<br/>You can use this option to calculate the original panel size when CSS transform is applied to viewport or panel.<br/>⚠️ If panel size is not fixed integer value, there can be a 1px gap between panels.<ko>패널과 뷰포트의 크기를 계산할 때 `offsetWidth`/`offsetHeight`를 `getBoundingClientRect` 대신 사용할지 여부.<br/>패널이나 뷰포트에 CSS transform이 설정되어 있을 때 원래 패널 크기를 계산하려면 옵션을 활성화한다.<br/>⚠️ 패널의 크기가 정수로 고정되어있지 않다면 패널 사이에 1px의 공간이 생길 수 있다.</ko>
- * @param {boolean} [options.renderOnlyVisible=false] Whether to render visible panels only. This can dramatically increase performance when there're many panels.<ko>보이는 패널만 렌더링할지 여부를 설정한다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있다.</ko>
- * @param {boolean|string[]} [options.isEqualSize=false] This option indicates whether all panels have the same size(true) of first panel, or it can hold a list of class names that determines panel size.<br/>Enabling this option can increase performance while recalculating panel size.<ko>모든 패널의 크기가 동일한지(true), 혹은 패널 크기를 결정하는 패널 클래스들의 리스트.<br/>이 옵션을 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</ko>
- * @param {boolean} [options.isConstantSize=false] Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size.<ko>모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</ko>
- * @param {boolean} [options.renderExternal=false] Whether to use external rendering. It will delegate DOM manipulation and can synchronize the rendered state by calling `sync()` method. You can use this option to use in frameworks like React, Vue, Angular, which has its states and rendering methods.<ko>외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, `sync()`를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.</ko>
- * @param {boolean} [options.resizeOnContentsReady=false] Whether to resize the Flicking after the image/video elements inside viewport are ready.<br/>Use this property to prevent wrong Flicking layout caused by dynamic image / video sizes.<ko>Flicking 내부의 이미지 / 비디오 엘리먼트들이 전부 로드되었을 때 Flicking의 크기를 재계산하기 위한 옵션.<br/>이미지 / 비디오 크기가 고정 크기가 아닐 경우 사용하여 레이아웃이 잘못되는 것을 방지할 수 있다.</ko>
- * @param {boolean} [options.collectStatistics=true] Whether to collect statistics on how you are using `Flicking`. These statistical data do not contain any personal information and are used only as a basis for the development of a user-friendly product.<ko>어떻게 `Flicking`을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.</ko>
+ * @interface
  */
@@ -100,5 +74,4 @@ export interface FlickingOptions {
   iOSEdgeSwipeThreshold: number;
+  preventClickOnDrag: boolean;
   // PERFORMANCE
-  isEqualSize: boolean | string[];
-  isConstantSize: boolean;
   renderOnlyVisible: boolean;
@@ -109,13 +82,10 @@ // OTHERS
   renderExternal: boolean;
-  useOffsetManipulator: boolean;
+  useOrderManipulator: boolean;
 }
 
 /**
- * @memberof eg
- * @extends eg.Component
- * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest" , "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
- * @requires {@link https://github.com/naver/egjs-component|eg.Component}
- * @requires {@link https://github.com/naver/egjs-axes|eg.Axes}
- * @requires {@link https://github.com/naver/egjs-imready|eg.ImReady}
- * @see Easing Functions Cheat Sheet {@link http://easings.net/} <ko>이징 함수 Cheat Sheet {@link http://easings.net/}</ko>
+ * @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}
  */
@@ -125,7 +95,7 @@ class Flicking extends Component<FlickingEvents> {
    * Version info string
-   *
    * @ko 버전정보 문자열
+   * @type {string}
+   * @readonly
    * @example
-   * eg.Flicking.VERSION;  // ex) 3.0.0
-   * @memberof eg.Flicking
+   * Flicking.VERSION;  // ex) 4.0.0
    */
@@ -139,3 +109,2 @@ public static VERSION = "#__VERSION__#";
   private _renderer: Renderer;
-  private _contentsReadyChecker: ImReady | null;
 
@@ -159,4 +128,3 @@ // Options
   private _iOSEdgeSwipeThreshold: FlickingOptions["iOSEdgeSwipeThreshold"];
-  private _isEqualSize: FlickingOptions["isEqualSize"];
-  private _isConstantSize: FlickingOptions["isConstantSize"];
+  private _preventClickOnDrag: FlickingOptions["preventClickOnDrag"];
   private _renderOnlyVisible: FlickingOptions["renderOnlyVisible"];
@@ -166,3 +134,3 @@ private _autoResize: FlickingOptions["autoResize"];
   private _renderExternal: FlickingOptions["renderExternal"];
-  private _useOffsetManipulator: FlickingOptions["useOffsetManipulator"];
+  private _useOrderManipulator: FlickingOptions["useOrderManipulator"];
 
@@ -173,16 +141,124 @@ // Internal State
   // Components
+  /**
+   * {@link Control} instance of the Flicking
+   * @ko 현재 Flicking에 활성화된 {@link Control} 인스턴스
+   * @type {Control}
+   * @default SnapControl
+   * @readonly
+   * @see Control
+   * @see SnapControl
+   * @see FreeControl
+   */
   public get control() { return this._control; }
+  /**
+   * {@link Camera} instance of the Flicking
+   * @ko 현재 Flicking에 활성화된 {@link Camera} 인스턴스
+   * @type {Camera}
+   * @default LinearCamera
+   * @readonly
+   * @see Camera
+   * @see LinearCamera
+   * @see BoundCamera
+   * @see CircularCamera
+   */
   public get camera() { return this._camera; }
+  /**
+   * {@link Renderer} instance of the Flicking
+   * @ko 현재 Flicking에 활성화된 {@link Renderer} 인스턴스
+   * @type {Renderer}
+   * @default RawRenderer
+   * @readonly
+   * @see Renderer
+   * @see RawRenderer
+   * @see VisibleRenderer
+   */
   public get renderer() { return this._renderer; }
+  /**
+   * A component that manages viewport size
+   * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
+   * @type {Viewport}
+   * @readonly
+   * @see Viewport
+   */
   public get viewport() { return this._viewport; }
   // 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
+   */
   public get initialized() { return this._initialized; }
+  /**
+   * Whether the `circular` option is enabled.
+   * The {@link Flicking#circular circular} option can't be enabled when sum of the panel sizes are too small.
+   * @ko {@link Flicking#circular circular} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+   * {@link Flicking#circular circular} 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.
+   * @type {boolean}
+   * @default false
+   * @readonly
+   */
   public get circularEnabled() { return this._camera.controlParams.circular; }
+  /**
+   * Index number of the {@link Flicking#currentPanel currentPanel}
+   * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
+   * @type {number}
+   * @default 0
+   * @readonly
+   */
   public get index() { return this._control.activeIndex; }
+  /**
+   * The root(`.flicking-viewport`) element
+   * @ko root(`.flicking-viewport`) 엘리먼트
+   * @type {HTMLElement}
+   * @readonly
+   */
   public get element() { return this._viewport.element; }
+  /**
+   * Currently active panel
+   * @ko 현재 선택된 패널
+   * @type {Panel}
+   * @readonly
+   * @see Panel
+   */
   public get currentPanel() { return this._control.activePanel; }
+  /**
+   * Array of panels
+   * @ko 전체 패널들의 배열
+   * @type {Panel[]}
+   * @readonly
+   * @see Panel
+   */
   public get panels() { return this._renderer.panels; }
+  /**
+   * Count of panels
+   * @ko 전체 패널의 개수
+   * @type {number}
+   * @readonly
+   */
   public get panelCount() { return this._renderer.panelCount; }
+  /**
+   * Array of panels that is visible at the current position
+   * @ko 현재 보이는 패널의 배열
+   * @type {Panel[]}
+   * @readonly
+   * @see Panel
+   */
   public get visiblePanels() { return this._camera.visiblePanels; }
+  /**
+   * Whether Flicking's animating
+   * @ko 현재 애니메이션 동작 여부
+   * @type {boolean}
+   * @readonly
+   */
   public get animating() { return this._control.animating; }
+  /**
+   * Whether user is clicking or touching
+   * @ko 현재 사용자가 클릭/터치중인지 여부
+   * @type {boolean}
+   * @readonly
+   */
   public get holding() { return this._control.holding; }
@@ -192,30 +268,232 @@
   // UI / LAYOUT
+  /**
+   * Align position of the panels within viewport. You can set different values each for the panel and camera
+   * @ko 뷰포트 내에서 패널 정렬방식을 설정하는 옵션. 카메라와 패널 개별로 옵션을 설정할 수도 있습니다
+   * @type {Constants.ALIGN | string | number | { panel: string | number, camera: string | number }}
+   * @property {Constants.ALIGN | string | number} panel The align value for each {@link Panel}s<ko>개개의 {@link Panel}에 적용할 값</ko>
+   * @property {Constants.ALIGN | string | number} camera The align value for {@link Camera}<ko>{@link Camera}에 적용할 값</ko>
+   * @default "center"
+   * @example
+   * ```ts
+   * const possibleOptions = [
+   *   // Literal strings
+   *   "prev", "center", "next",
+   *   // % values, applied to both panel & camera
+   *   "0%", "25%", "42%",
+   *   // px values, arithmetic calculation with (+/-) is also allowed.
+   *   "0px", "100px", "50% - 25px",
+   *   // numbers, same to number + px ("0px", "100px")
+   *   0, 100, 1000,
+   *   // Setting a different value for panel & camera
+   *   { panel: "10%", camera: "25%" }
+   * ];
+   *
+   * possibleOptions.forEach(align => {
+   *   new Flicking("#el", { align });
+   * });
+   * ```
+   */
   public get align() { return this._align; }
+  /**
+   * Index of the panel to move when Flicking's {@link Flicking#init init()} is called. A zero-based integer
+   * @ko Flicking의 {@link Flicking#init init()}이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다
+   * @type {number}
+   * @default 0
+   */
   public get defaultIndex() { return this._defaultIndex; }
+  /**
+   * Direction of panel movement (true: horizontal, false: vertical)
+   * @ko 패널 이동 방향 (true: 가로방향, false: 세로방향)
+   * @type {boolean}
+   * @default true
+   */
   public get horizontal() { return this._horizontal; }
+  /**
+   * Enables circular(continuous loop) mode, which connects first/last panel for continuous scrolling.
+   * @ko 순환 모드를 활성화합니다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능합니다.
+   * @type {boolean}
+   * @default false
+   */
   public get circular() { return this._circular; }
+  /**
+   * Prevent the view(camera element) from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel
+   * Only can be enabled when `circular=false`
+   * @ko 뷰(카메라 엘리먼트)가 첫번째와 마지막 패널 밖으로 넘어가지 못하게 하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 옵션입니다
+   * `circular=false`인 경우에만 사용할 수 있습니다
+   * @type {boolean}
+   * @default false
+   */
   public get bound() { return this._bound; }
+  /**
+   * Update height of the viewport element after movement same to the height of the panel below. This can be only enabled when `horizontal=true`
+   * @ko 이동한 후 뷰포트 엘리먼트의 크기를 현재 패널의 높이와 동일하게 설정합니다. `horizontal=true`인 경우에만 사용할 수 있습니다.
+   * @type {boolean}
+   * @default false
+   */
   public get adaptive() { return this._adaptive; }
   // EVENTS
+  /**
+   * A Threshold from viewport edge before triggering `needPanel` event
+   * @ko `needPanel`이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리
+   * @type {number}
+   * @default 0
+   */
   public get needPanelThreshold() { return this._needPanelThreshold; }
   // ANIMATION
+  /**
+   * Deceleration value for panel movement animation which is triggered by user input. A higher value means a shorter animation time
+   * @ko 사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아집니다
+   * @type {number}
+   * @default 0.0075
+   */
   public get deceleration() { return this._deceleration; }
+  /**
+   * An easing function applied to the panel movement animation. Default value is `easeOutCubic`
+   * @ko 패널 이동 애니메이션에 적용할 easing 함수. 기본값은 `easeOutCubic`이다
+   * @type {function}
+   * @default x => 1 - Math.pow(1 - x, 3)
+   * @see Easing Functions Cheat Sheet {@link http://easings.net/} <ko>이징 함수 Cheat Sheet {@link http://easings.net/}</ko>
+   */
   public get easing() { return this._easing; }
+  /**
+   * Default duration of the animation (ms)
+   * @ko 디폴트 애니메이션 재생 시간 (ms)
+   * @default 500
+   * @type number
+   */
   public get duration() { return this._duration; }
   // INPUT
+  /**
+   * Types of input devices to enable
+   * @ko 활성화할 입력 장치 종류
+   * @type string[]
+   * @default ["touch", "mouse"]
+   * @see {@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption Possible values (PanInputOption#inputType)}
+   * <ko>{@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption 가능한 값들 (PanInputOption#inputType)}</ko>
+   */
   public get inputType() { return this._inputType; }
+  /**
+   * Movement style by user input. This will change instance type of {@link Flicking#control}
+   * @ko 사용자 입력에 의한 이동 방식. 이 값에 따라 {@link Flicking#control}의 인스턴스 타입이 결정됩니다
+   * @type string
+   * @default "snap"
+   * @see {@link Constants.MOVE_TYPE}
+   * @example
+   * ```ts
+   * import Flicking, { MOVE_TYPE } from "@egjs/flicking";
+   *
+   * const flicking = new Flicking({
+   *   moveType: MOVE_TYPE.FREE_SCROLL
+   * });
+   * ```
+   */
   public get moveType() { return this._moveType; }
+  /**
+   * Movement threshold to change panel (unit: px). It should be dragged above the threshold to change the current panel.
+   * @ko 패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.
+   * @type {number}
+   * @default 40
+   */
   public get threshold() { return this._threshold; }
+  /**
+   * Set animation to be interruptable by click/touch.
+   * @ko 사용자의 클릭/터치로 인해 애니메이션을 도중에 멈출 수 있도록 설정합니다.
+   * @type {boolean}
+   * @default true
+   */
   public get interruptable() { return this._interruptable; }
+  /**
+   * The size value of the bounce area. Only can be enabled when `circular=false`.
+   * You can set different bounce value for prev/next direction by using array.
+   * `number` for px value, and `string` for px, and % value relative to viewport size.
+   * You have to call {@link Control#updateInput} after changing this to take effect.
+   * @ko Flicking이 최대 영역을 넘어서 갈 수 있는 최대 크기. `circular=false`인 경우에만 사용할 수 있습니다.
+   * 배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정할 수 있습니다.
+   * `number`를 통해 px값을, `stirng`을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있습니다.
+   * 이 값을 변경시 {@link Control#updateInput}를 호출해야 합니다.
+   * @type {string | number | Array<string | number>}
+   * @default "20%"
+   * @example
+   * ```ts
+   * const possibleOptions = [
+   *   // % values, relative to viewport element(".flicking-viewport")'s size
+   *   "0%", "25%", "42%",
+   *   // px values, arithmetic calculation with (+/-) is also allowed.
+   *   "0px", "100px", "50% - 25px",
+   *   // numbers, same to number + px ("0px", "100px")
+   *   0, 100, 1000
+   * ];
+   * ```
+   *
+   * @example
+   * ```ts
+   * const flicking = new Flicking("#el", { bounce: "20%" });
+   *
+   * flicking.bounce = "100%";
+   * flicking.control.updateInput(); // Call this to update!
+   * ```
+   */
   public get bounce() { return this._bounce; }
+  /**
+   * Size of the area from the right edge in iOS safari (in px) which enables swipe-back or swipe-forward
+   * @ko iOS Safari에서 swipe를 통한 뒤로가기/앞으로가기를 활성화하는 오른쪽 끝으로부터의 영역의 크기 (px)
+   * @type {number}
+   * @default 30
+   */
   public get iOSEdgeSwipeThreshold() { return this._iOSEdgeSwipeThreshold; }
+  /**
+   * Automatically prevent `click` event if the user has dragged at least a single pixel on the viewport element
+   * @ko 사용자가 뷰포트 영역을 1픽셀이라도 드래그했을 경우 자동으로 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트를 취소합니다
+   * @type {boolean}
+   * @default true
+   */
+  public get preventClickOnDrag() { return this._preventClickOnDrag; }
   // PERFORMANCE
-  public get isEqualSize() { return this._isEqualSize; }
-  public get isConstantSize() { return this._isConstantSize; }
+  /**
+   * Whether to render visible panels only. This can dramatically increase performance when there're many panels.
+   * This will set {@link Flicking#renderer renderer}'s type to {@link VisibleRenderer}
+   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다.
+   * 이 옵션을 활성화할 경우 {@link Flicking#renderer renderer}의 타입을 {@link VisibleRenderer}로 설정합니다.
+   * @type {boolean}
+   * @default false
+   */
   public get renderOnlyVisible() { return this._renderOnlyVisible; }
   // OTHERS
+  /**
+   * Call {@link Flicking#init init()} automatically when creating Flicking's instance
+   * @ko Flicking 인스턴스를 생성할 때 자동으로 {@link Flicking#init init()}를 호출합니다
+   * @type {boolean}
+   * @default true
+   * @readonly
+   */
   public get autoInit() { return this._autoInit; }
+  /**
+   * Attach Flicking's {@link Flicking#resize resize} method to window's resize event.
+   * Flicking will automatically call {@link Flicking#resize resize} window size and orientation change.
+   * @ko Flicking의 {@link Flicking#resize resize} 메소드를 window의 resize 이벤트 핸들러로 등록합니다.
+   * 설정시 window 창 크기 및 orientation 변경에 의해 자동으로 {@link Flicking#resize resize}를 호출합니다.
+   * @type {boolean}
+   * @default true
+   */
   public get autoResize() { return this._autoResize; }
+  /**
+   * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
+   * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
+   * @type {boolean}
+   * @default false
+   * @internal
+   * @readonly
+   */
   public get renderExternal() { return this._renderExternal; }
-  public get useOffsetManipulator() { return this._useOffsetManipulator; }
+  /**
+   * Use {@link OrderManipulator} for the element order managing in {@link Renderer}.
+   * Instead of inserting/removing element to change order, this will use CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/order order}.
+   * ⚠️ Enabling this option will decrease browser coverage to IE11+
+   * @ko {@link Renderer}에서 엘리먼트 순서 관리를 위해 {@link OrderManipulator}를 사용합니다.
+   * 엘리먼트를 직접적으로 추가/삭제하는 대신 CSS {@link https://developer.mozilla.org/ko/docs/Web/CSS/order order} 속성을 사용해서 순서를 관리합니다.
+   * ⚠️ 이 옵션을 사용시 IE10 이하의 브라우저는 지원할 수 없습니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get useOrderManipulator() { return this._useOrderManipulator; }
 
@@ -246,10 +524,37 @@ // Options Setter
   public set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]) { this._iOSEdgeSwipeThreshold = val; }
+  public set preventClickOnDrag(val: FlickingOptions["preventClickOnDrag"]) { this._preventClickOnDrag = val; }
   // PERFORMANCE
-  public set isEqualSize(val: FlickingOptions["isEqualSize"]) { this._isEqualSize = val; }
-  public set isConstantSize(val: FlickingOptions["isConstantSize"]) { this._isConstantSize = val; }
   public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) { this._renderOnlyVisible = val; }
   // OTHERS
-  public set autoInit(val: FlickingOptions["autoInit"]) { this._autoInit = val; }
   public set autoResize(val: FlickingOptions["autoResize"]) { this._autoResize = val; }
+  public set useOrderManipulator(val: FlickingOptions["useOrderManipulator"]) { this._useOrderManipulator = val; }
 
+  /**
+   * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
+   * <ko>Flicking을 초기화할 HTMLElement로, `string` 타입으로 지정시 css 선택자 문자열을 지정해야 합니다.</ko>
+   * @param {object} [options={}] An options object for Flicking.<ko>Flicking에 적용할 옵션 오브젝트</ko>
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE WRONG_TYPE}|When the root is not either string or HTMLElement|
+   * |{@link Constants.ERROR_CODE ELEMENT_NOT_FOUND}|When the element with given CSS selector does not exist|
+   * <ko>
+   *
+   * |code|조건|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE WRONG_TYPE}|루트 엘리먼트가 string이나 HTMLElement가 아닐 경우|
+   * |{@link Constants.ERROR_CODE ELEMENT_NOT_FOUND}|주어진 CSS selector로 엘리먼트를 찾지 못했을 경우|
+   *
+   * </ko>
+   * @example
+   * ```ts
+   * import Flicking from "@egjs/flicking";
+   *
+   * // Creating new instance of Flicking with HTMLElement
+   * const flicking = new Flicking(document.querySelector(".flicking-viewport"), { circular: true });
+   *
+   * // Creating new instance of Flicking with CSS selector
+   * const flicking2 = new Flicking(".flicking-viewport", { circular: true });
+   * ```
+   */
   public constructor(root: HTMLElement | string, {
@@ -272,4 +577,3 @@ align = ALIGN.CENTER,
     iOSEdgeSwipeThreshold = 30,
-    isEqualSize = false,
-    isConstantSize = false,
+    preventClickOnDrag = true,
     renderOnlyVisible = false,
@@ -279,3 +583,3 @@ autoInit = true,
     renderExternal = false,
-    useOffsetManipulator = false
+    useOrderManipulator = false
   }: Partial<FlickingOptions> = {}) {
@@ -304,4 +608,3 @@ super();
     this._iOSEdgeSwipeThreshold = iOSEdgeSwipeThreshold;
-    this._isEqualSize = isEqualSize;
-    this._isConstantSize = isConstantSize;
+    this._preventClickOnDrag = preventClickOnDrag;
     this._renderOnlyVisible = renderOnlyVisible;
@@ -311,3 +614,3 @@ this._autoResize = autoResize;
     this._renderExternal = renderExternal;
-    this._useOffsetManipulator = useOffsetManipulator;
+    this._useOrderManipulator = useOrderManipulator;
 
@@ -319,3 +622,2 @@ // Create core components
     this._control = this._createControl();
-    this._contentsReadyChecker = null;
 
@@ -328,3 +630,8 @@ if (this._autoInit) {
   /**
-   *
+   * 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 {this}
    */
@@ -337,2 +644,3 @@ public init(): this {
     const control = this._control;
+    const viewport = this._viewport;
 
@@ -351,2 +659,5 @@ camera.init(this);
     }
+    if (this._preventClickOnDrag) {
+      viewport.element.addEventListener("click", this._preventClickWhenDragged);
+    }
 
@@ -361,9 +672,5 @@ // Done initializing & emit ready event
   /**
-   * Return the reference element and all its children to the state they were in before the instance was created. Remove all attached event handlers. Specify `null` for all attributes of the instance (including inherited attributes).
-   *
-   * @ko 기준 요소와 그 하위 패널들을 인스턴스 생성전의 상태로 되돌린다. 부착된 모든 이벤트 핸들러를 탈거한다. 인스턴스의 모든 속성(상속받은 속성포함)에 `null`을 지정한다.
-   * @example
-   * const flick = new eg.Flicking("#flick");
-   * flick.destroy();
-   * console.log(flick.moveTo); // null
+   * Destroy Flicking and remove all event handlers
+   * @ko Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다
+   * @return {void}
    */
@@ -375,2 +682,3 @@ public destroy(): void {
     window.removeEventListener("resize", this.resize);
+    this._viewport.element.removeEventListener("click", this._preventClickWhenDragged);
 
@@ -381,5 +689,2 @@ this._control.destroy();
 
-    this._viewport.destroy();
-    this._contentsReadyChecker?.destroy();
-
     this._initialized = false;
@@ -389,29 +694,113 @@ }
   /**
-   * Move to the previous panel if it exists.
+   * Move to the previous panel (current index - 1)
+   * @ko 이전 패널로 이동합니다 (현재 인덱스 - 1)
+   * @param {number} [duration={@link Flicking#duration options.duration}] Duration of the panel movement animation (unit: ms)<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
+   * @async
+   * @fires Flicking#moveStart
+   * @fires Flicking#move
+   * @fires Flicking#moveEnd
+   * @fires Flicking#willChange
+   * @fires Flicking#changed
+   * @fires Flicking#willRestore
+   * @fires Flicking#restored
+   * @fires Flicking#needPanel
+   * @fires Flicking#visibleChange
+   * @fires Flicking#reachEdge
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE INDEX_OUT_OF_RANGE}|When the previous panel does not exist|
+   * |{@link Constants.ERROR_CODE ANIMATION_ALREADY_PLAYING}|When the animation is already playing|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|When the any of the event's `stop()` is called|
+   * <ko>
    *
-   * @ko 이전 패널이 존재시 해당 패널로 이동한다.
-   * @param [duration=options.duration] Duration of the panel movement animation.(unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE INDEX_OUT_OF_RANGE}|이전 패널이 존재하지 않을 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_ALREADY_PLAYING}|애니메이션이 이미 진행중인 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the previous panel<ko>이전 패널 도달시에 resolve되는 Promise</ko>
    */
-  public prev(duration: number = this._duration) {
-    return this.moveTo(this._control.activePanel?.prev()?.index ?? -1, duration);
+  public prev(duration: number = this._duration): Promise<void> {
+    return this.moveTo(this._control.activePanel?.prev()?.index ?? -1, duration, DIRECTION.PREV);
   }
 
   /**
-   * Move to the next panel if it exists.
+   * Move to the next panel (current index + 1)
+   * @ko 다음 패널로 이동합니다 (현재 인덱스 + 1)
+   * @param {number} [duration={@link Flicking#duration options.duration}] Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
+   * @async
+   * @fires Flicking#moveStart
+   * @fires Flicking#move
+   * @fires Flicking#moveEnd
+   * @fires Flicking#willChange
+   * @fires Flicking#changed
+   * @fires Flicking#willRestore
+   * @fires Flicking#restored
+   * @fires Flicking#needPanel
+   * @fires Flicking#visibleChange
+   * @fires Flicking#reachEdge
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE INDEX_OUT_OF_RANGE}|When the next panel does not exist|
+   * |{@link Constants.ERROR_CODE ANIMATION_ALREADY_PLAYING}|When the animation is already playing|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|When the any of the event's `stop()` is called|
+   * <ko>
    *
-   * @ko 다음 패널이 존재시 해당 패널로 이동한다.
-   * @param [duration=options.duration] Duration of the panel movement animation(unit: ms).<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE INDEX_OUT_OF_RANGE}|다음 패널이 존재하지 않을 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_ALREADY_PLAYING}|애니메이션이 이미 진행중인 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+   *
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the next panel<ko>다음 패널 도달시에 resolve되는 Promise</ko>
    */
   public next(duration: number = this._duration) {
-    return this.moveTo(this._control.activePanel?.next()?.index ?? this._renderer.panelCount, duration);
+    return this.moveTo(this._control.activePanel?.next()?.index ?? this._renderer.panelCount, duration, DIRECTION.NEXT);
   }
 
   /**
-   * Move to the panel of given index.
+   * Move to the panel with given index
+   * @ko 주어진 인덱스에 해당하는 패널로 이동합니다
+   * @param {number} index The index of the panel to move<ko>이동할 패널의 인덱스</ko>
+   * @param {number} [duration={@link Flicking#duration options.duration}] Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
+   * @param {Constants.DIRECTION} [direction=DIRECTION.NONE] Direction to move, only available in the {@link Flicking#circular circular} mode<ko>이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다</ko>
+   * @async
+   * @fires Flicking#moveStart
+   * @fires Flicking#move
+   * @fires Flicking#moveEnd
+   * @fires Flicking#willChange
+   * @fires Flicking#changed
+   * @fires Flicking#willRestore
+   * @fires Flicking#restored
+   * @fires Flicking#needPanel
+   * @fires Flicking#visibleChange
+   * @fires Flicking#reachEdge
+   * @throws {FlickingError}
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE INDEX_OUT_OF_RANGE}|When the root is not either string or HTMLElement|
+   * |{@link Constants.ERROR_CODE ANIMATION_ALREADY_PLAYING}|When the animation is already playing|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|When the any of the event's `stop()` is called|
+   * <ko>
    *
-   * @ko 주어진 인덱스에 해당하는 패널로 이동한다.
-   * @param index The index number of the panel to move.<ko>이동할 패널의 인덱스 번호.</ko>
-   * @param duration [duration=options.duration] Duration of the panel movement.(unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
+   * |code|condition|
+   * |---|---|
+   * |{@link Constants.ERROR_CODE INDEX_OUT_OF_RANGE}|해당 인덱스를 가진 패널이 존재하지 않을 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_ALREADY_PLAYING}|애니메이션이 이미 진행중인 경우|
+   * |{@link Constants.ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
+   * |{@link Constants.ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+   *
+   * </ko>
+   * @return {Promise<void>} A Promise which will be resolved after reaching the target panel<ko>해당 패널 도달시에 resolve되는 Promise</ko>
    */
-  public moveTo(index: number, duration: number = this._duration) {
+  public moveTo(index: number, duration: number = this._duration, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
     const renderer = this._renderer;
@@ -430,10 +819,19 @@ const panelCount = renderer.panelCount;
 
-    return this._control.moveToPanel(panel, duration);
+    return this._control.moveToPanel(panel, {
+      duration,
+      direction
+    });
   }
 
   /**
-   * Return the panel of given index. `null` if it doesn't exists.
-   *
-   * @ko 주어진 인덱스에 해당하는 패널을 반환한다. 해당 패널이 존재하지 않을 시 `null`이다.
-   * @return Panel of given index.<ko>주어진 인덱스에 해당하는 패널.</ko>
+   * Return the {@link Panel} at the given index. `null` if it doesn't exists.
+   * @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.
+   * @return {Panel | null} Panel at the given index<ko>주어진 인덱스에 해당하는 패널</ko>
+   * @see Panel
+   * @example
+   * ```ts
+   * const panel = flicking.getPanel(0);
+   * // Which is a shorthand to...
+   * const samePanel = flicking.panels[0];
+   * ```
    */
@@ -445,9 +843,8 @@ public getPanel(index: number): Panel | null {
   /**
-   * Unblock input devices.
-   *
-   * @ko 막았던 입력 장치로부터의 입력을 푼다.
-   * @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
+   * Enable input from the user (mouse/touch)
+   * @ko 사용자의 입력(마우스/터치)를 활성화합니다
+   * @return {this}
    */
   public enableInput(): this {
-    this._control.controller?.enable();
+    this._control.enable();
     return this;
@@ -457,9 +854,8 @@ }
   /**
-   * Block input devices.
-   *
-   * @ko 입력 장치로부터의 입력을 막는다.
-   * @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
+   * Disable input from the user (mouse/touch)
+   * @ko 사용자의 입력(마우스/터치)를 막습니다
+   * @return {this}
    */
   public disableInput(): this {
-    this._control.controller?.disable();
+    this._control.disable();
     return this;
@@ -469,8 +865,8 @@ }
   /**
-   * Get current flicking status. You can restore current state by giving returned value to [setStatus()]{@link eg.Flicking#setStatus}.
-   *
-   * @ko 현재 상태 값을 반환한다. 반환받은 값을 [setStatus()]{@link eg.Flicking#setStatus} 메소드의 인자로 지정하면 현재 상태를 복원할 수 있다.
+   * Get current flicking status. You can restore current state by giving returned value to [setStatus()]{@link Flicking#setStatus}
+   * @ko 현재 상태를 반환합니다. 반환받은 값을 [setStatus()]{@link Flicking#setStatus} 메소드의 인자로 지정하면 현재 상태를 복원할 수 있습니다
    * @return An object with current status value information.<ko>현재 상태값 정보를 가진 객체.</ko>
    */
   public getStatus() {
+    // TODO:
     return {
@@ -484,8 +880,9 @@ index: -1,
   /**
-   * Restore to the state of the `status`.
-   *
-   * @ko `status`의 상태로 복원한다.
-   * @param status Status value to be restored. You can specify the return value of the [getStatus()]{@link eg.Flicking#getStatus} method.<ko>복원할 상태 값. [getStatus()]{@link eg.Flicking#getStatus}메서드의 반환값을 지정하면 된다.</ko>
+   * Restore to the state of the `status`
+   * @ko `status`의 상태로 복원합니다
+   * @param status Status value to be restored. You can specify the return value of the [getStatus()]{@link Flicking#getStatus} method<ko>복원할 상태 값. [getStatus()]{@link Flicking#getStatus}메서드의 반환값을 지정하면 됩니다</ko>
+   * @return {void}
    */
   public setStatus(status): void {
+    // TODO:
     return;
@@ -495,9 +892,9 @@ }
   /**
-   * Add plugins that can have different effects on Flicking.
-   *
-   * @ko 플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가한다.
-   * @param - The plugin(s) to add.<ko>추가할 플러그인(들).</ko>
-   * @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
+   * Add plugins that can have different effects on Flicking
+   * @ko 플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가합니다
+   * @param - The plugin(s) to add<ko>추가할 플러그인(들)</ko>
+   * @return {this}
    */
   public addPlugins(plugins: Plugin | Plugin[]) {
+    // TODO:
     return this;
@@ -508,8 +905,8 @@ }
    * Remove plugins from Flicking.
-   *
-   * @ko 플리킹으로부터 플러그인들을 제거한다.
+   * @ko 플리킹으로부터 플러그인들을 제거합니다.
    * @param - The plugin(s) to remove.<ko>제거 플러그인(들).</ko>
-   * @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
+   * @return {this}
    */
   public removePlugins(plugins: Plugin | Plugin[]) {
+    // TODO:
     return this;
@@ -519,7 +916,8 @@ }
   /**
-   * Update panels to current state.
-   *
-   * @ko 패널들을 현재 상태에 맞춰 갱신한다.
+   * Update viewport/panel sizes
+   * @ko 패널 및 뷰포트의 크기를 갱신합니다
    * @method
-   * @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
+   * @fires Flicking#beforeResize
+   * @fires Flicking#afterResize
+   * @return {this}
    */
@@ -548,2 +946,3 @@ public resize = (): this => {
     control.updateInput();
+    camera.updatePosition();
 
@@ -564,2 +963,3 @@ const newWidth = viewport.width;
     }));
+
     return this;
@@ -569,15 +969,20 @@ };
   /**
-   * Add new panels at the end of panels.
-   *
-   * @ko 제일 끝에 새로운 패널을 추가한다.
-   * @param element - Either HTMLElement, HTML string, or array of them.<br>It can be also HTML string of multiple elements with same depth.<ko>HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.<br>또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.</ko>
-   * @return Array of appended panels.<ko>추가된 패널들의 배열</ko>
+   * Add new panels after the last panel
+   * @ko 패널 목록의 제일 끝에 새로운 패널들을 추가합니다
+   * @param {ElementLike | ElementLike[]} element A new HTMLElement, a outerHTML of element, or an array of both
+   * <ko>새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열</ko>
+   * @return {Panel[]} An array of appended panels<ko>추가된 패널들의 배열</ko>
+   * @see Panel
+   * @see ElementLike
+   * @throws {FlickingError} {@link Constants.ERROR_CODE ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK} if called on frameworks (React, Angular, Vue...)
    * @example
-   * // Suppose there were no panels at initialization
-   * const flicking = new eg.Flicking("#flick");
-   * flicking.append(document.createElement("div")); // Appended at index 0
-   * flicking.append("\<div\>Panel\</div\>"); // Appended at index 1
-   * flicking.append(["\<div\>Panel\</div\>", document.createElement("div")]); // Appended at index 2, 3
+   * ```ts
+   * const flicking = new Flicking("#flick");
+   * // These are possible parameters
+   * flicking.append(document.createElement("div"));
+   * flicking.append("\<div\>Panel\</div\>");
+   * flicking.append(["\<div\>Panel\</div\>", document.createElement("div")]);
    * // Even this is possible
-   * flicking.append("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>"); // Appended at index 4, 5
+   * flicking.append("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");
+   * ```
    */
@@ -589,14 +994,21 @@ public append(element: ElementLike | ElementLike[]): Panel[] {
   /**
-   * Add new panels at the beginning of panels.
-   *
-   * @ko 제일 앞에 새로운 패널을 추가한다.
-   * @param element - Either HTMLElement, HTML string, or array of them.<br>It can be also HTML string of multiple elements with same depth.<ko>HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.<br>또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.</ko>
-   * @return Array of appended panels.<ko>추가된 패널들의 배열</ko>
+   * Add new panels before the first panel
+   * This will increase index of panels after by the number of panels added
+   * @ko 패널 목록의 제일 앞(index 0)에 새로운 패널들을 추가합니다
+   * 추가한 패널의 개수만큼 기존 패널들의 인덱스가 증가합니다.
+   * @param {ElementLike | ElementLike[]} element A new HTMLElement, a outerHTML of element, or an array of both
+   * <ko>새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열</ko>
+   * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
+   * @see Panel
+   * @see ElementLike
+   * @throws {FlickingError} {@link Constants.ERROR_CODE ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK} if called on frameworks (React, Angular, Vue...)
    * @example
-   * // Suppose there were no panels at initialization
+   * ```ts
    * const flicking = new eg.Flicking("#flick");
-   * flicking.replace(3, document.createElement("div")); // Add new panel at index 3
-   * flicking.prepend("\<div\>Panel\</div\>"); // Prepended at index 2
-   * flicking.prepend(["\<div\>Panel\</div\>", document.createElement("div")]); // Prepended at index 0, 1
-   * flicking.prepend("\<div\>Panel\</div\>"); // Prepended at index 0, pushing every panels behind it.
+   * flicking.prepend(document.createElement("div"));
+   * flicking.prepend("\<div\>Panel\</div\>");
+   * flicking.prepend(["\<div\>Panel\</div\>", document.createElement("div")]);
+   * // Even this is possible
+   * flicking.prepend("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");
+   * ```
    */
@@ -607,2 +1019,22 @@ public prepend(element: ElementLike | ElementLike[]): Panel[] {
 
+  /**
+   * Insert new panels at given index
+   * This will increase index of panels after by the number of panels added
+   * @ko 주어진 인덱스에 새로운 패널들을 추가합니다
+   * 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
+   * @param {number} index Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
+   * @param {ElementLike | ElementLike[]} element A new HTMLElement, a outerHTML of element, or an array of both
+   * <ko>새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열</ko>
+   * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
+   * @throws {FlickingError} {@link Constants.ERROR_CODE ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK} if called on frameworks (React, Angular, Vue...)
+   * @example
+   * ```ts
+   * const flicking = new eg.Flicking("#flick");
+   * flicking.insert(0, document.createElement("div"));
+   * flicking.insert(2, "\<div\>Panel\</div\>");
+   * flicking.insert(1, ["\<div\>Panel\</div\>", document.createElement("div")]);
+   * // Even this is possible
+   * flicking.insert(3, "\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");
+   * ```
+   */
   public insert(index: number, element: ElementLike | ElementLike[]): Panel[] {
@@ -617,8 +1049,9 @@ if (this._renderExternal) {
   /**
-   * Remove panel at target index. This will decrease index of panels behind it.
-   *
-   * @ko `index`에 해당하는 자리의 패널을 제거한다. 수행시 `index` 이후의 패널들의 인덱스가 감소된다.
-   * @param index - Index of panel to remove.<ko>제거할 패널의 인덱스</ko>
-   * @param {number} [deleteCount=1] - Number of panels to remove from index.<ko>`index` 이후로 제거할 패널의 개수.</ko>
-   * @return Array of removed panels<ko>제거된 패널들의 배열</ko>
+   * Remove the panel at the given index
+   * This will decrease index of panels after by the number of panels removed
+   * @ko 주어진 인덱스의 패널을 제거합니다
+   * 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
+   * @param {number} index Index of panel to remove<ko>제거할 패널의 인덱스</ko>
+   * @param {number} [deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
+   * @return {Panel[]} An array of removed panels<ko>제거된 패널들의 배열</ko>
    */
@@ -666,6 +1099,6 @@ public remove(index: number, deleteCount: number = 1): Panel[] {
   private _createRenderer(): Renderer {
-    const elementManipulator = this._useOffsetManipulator
-      ? new OffsetManipulator()
+    const elementManipulator = this._useOrderManipulator
+      ? new OrderManipulator()
       : this._renderExternal
-        ? new ExternalManipulator()
+        ? new OffsetManipulator()
         : new ElementManipulator();
@@ -696,6 +1129,14 @@
 
-    void control.moveToPanel(initialPanel, 0);
+    void control.moveToPanel(initialPanel, {
+      duration: 0
+    });
   }
+
+  private _preventClickWhenDragged = (e: MouseEvent) => {
+    if (this._control.animating) {
+      e.preventDefault();
+    }
+  };
 }
 
 export default Flicking;

src/renderer/ElementManipulator.ts

@@ -6,6 +6,10 @@ /*
 import Panel from "~/core/Panel";
-import ExternalManipulator from "~/renderer/ExternalManipulator";
+import OffsetManipulator from "~/renderer/OffsetManipulator";
 import { getFlickingAttached, includes } from "~/utils";
 
-class ElementManipulator extends ExternalManipulator {
+/**
+ * A component that manages element add/remove and element's order change
+ * @ko 엘리먼트 추가/제거 및 순서 변경을 담당하는 컴포넌트
+ */
+class ElementManipulator extends OffsetManipulator {
   public insertPanelElements(panels: Panel[], nextSibling: Panel | null): this {
@@ -12,0 +16,0 @@ const flicking = getFlickingAttached(this._flicking, "Renderer");

src/renderer/index.ts

@@ -8,2 +8,5 @@ /*
 import VisibleRenderer from "./VisibleRenderer";
+import ElementManipulator from "./ElementManipulator";
+import OffsetManipulator from "./OffsetManipulator";
+import OrderManipulator from "./OrderManipulator";
 
@@ -13,3 +16,6 @@ export {
   RawRenderer,
-  VisibleRenderer
+  VisibleRenderer,
+  OffsetManipulator,
+  ElementManipulator,
+  OrderManipulator
 };
@@ -16,0 +22,0 @@

src/renderer/OffsetManipulator.ts

@@ -0,52 +1,169 @@
+/*
+* Copyright (c) 2015 NAVER Corp.
+* egjs projects are licensed under the MIT license
+*/
+import Component from "@egjs/component";
+
+import Flicking from "~/Flicking";
 import Panel from "~/core/Panel";
-import ExternalManipulator from "~/renderer/ExternalManipulator";
+import { getFlickingAttached } from "~/utils";
 import { TogglePoint } from "~/camera/CircularCamera";
-import { getFlickingAttached } from "~/utils";
 
-class OffsetManipulator extends ExternalManipulator {
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * Event that fires when order of the elements is changed
+ * @ko 엘리먼트 순서 변경시 트리거되는 이벤트
+ * @event OffsetManipulator#orderChanged
+ * @type {void}
+ */
+
+/**
+ * A component that manages panel offset from the element's order change
+ * @ko 엘리먼트 순서 변경에 의한 패널 오프셋 변경을 담당하는 컴포넌트
+ * @internal
+ * @fires OffsetManipulator#orderChanged
+ */
+class OffsetManipulator extends Component<{
+  orderChanged: void;
+}> {
+  protected _flicking: Flicking | null;
+
+  /** */
+  public constructor() {
+    super();
+    this._flicking = null;
+  }
+
+  /**
+   * Initialize OffsetManipulator
+   * @ko OffsetManipulator를 초기화합니다
+   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
+   * @chainable
+   * @return {this}
+   */
+  public init(flicking: Flicking) {
+    this._flicking = flicking;
+  }
+
+  /**
+   * Destroy Renderer and return to initial state
+   * @ko Renderer를 초기 상태로 되돌립니다
+   * @return {void}
+   */
+  public destroy() {
+    this._flicking = null;
+  }
+
+  /**
+   * Insert panel elements before nextSibling
+   * @ko 패널 엘리먼트들을 기준 패널(`nextSibling`) 이전에 추가합니다
+   * @param {Panel[]} panels An array of panels to add<ko>추가할 패널의 배열</ko>
+   * @chainable
+   * @return {this}
+   */
+  public insertPanelElements(panels: Panel[], nextSibling: Panel | null): this {
+    // DO NOTHING
+    return this;
+  }
+
+  /**
+   * Move panel element as the first child of the camera element
+   * @ko 패널 엘리먼트들을 카메라 엘리먼트의 첫번째 child로 이동시킨다
+   * @param {Panel[]} panels Panels to move<ko>위치를 변경할 패널들</ko>
+   * @param {TogglePoint[]} togglePoints An array of the positions that triggered element order change<ko>패널 순서를 변경시킨 좌표 정보들의 배열</ko>
+   * @chainable
+   * @return {this}
+   */
   public movePanelElementsToStart(panels: Panel[], togglePoints: TogglePoint[]): this {
     const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const camRangeDiff = flicking.camera.rangeDiff;
 
-    if (flicking.circular && !flicking.renderOnlyVisible) {
-      panels.forEach((panel, idx) => {
-        if (togglePoints[idx].toggled) {
-          panel.element.style.order = "-1";
-        } else {
-          panel.element.style.order = "0";
-        }
-      });
+    panels.forEach((panel, idx) => {
+      panel.decreaseOffset(camRangeDiff);
+    });
+
+    if (panels.length > 0) {
+      this.trigger("orderChanged");
     }
-
-    return super.movePanelElementsToStart(panels, togglePoints);
+    return this;
   }
 
+  /**
+   * Move panel element as the last child of the camera element
+   * @ko 패널 엘리먼트들을 카메라 엘리먼트의 마지막 child로 이동시킨다
+   * @param {Panel[]} panels Panels to move<ko>위치를 변경할 패널들</ko>
+   * @param {TogglePoint[]} togglePoints An array of the positions that triggered element order change<ko>패널 순서를 변경시킨 좌표 정보들의 배열</ko>
+   * @chainable
+   * @return {this}
+   */
   public movePanelElementsToEnd(panels: Panel[], togglePoints: TogglePoint[]): this {
     const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const camRangeDiff = flicking.camera.rangeDiff;
 
-    if (flicking.circular && !flicking.renderOnlyVisible) {
-      panels.forEach((panel, idx) => {
-        if (togglePoints[idx].toggled) {
-          panel.element.style.order = "1";
-        } else {
-          panel.element.style.order = "0";
-        }
-      });
+    panels.forEach((panel, idx) => {
+      panel.increaseOffset(camRangeDiff);
+    });
+
+    if (panels.length > 0) {
+      this.trigger("orderChanged");
     }
-
-    return super.movePanelElementsToEnd(panels, togglePoints);
+    return this;
   }
 
+  /**
+   * Reset panel element order by the panel's index
+   * @ko 패널 엘리먼트 순서를 인덱스 순으로 변경한다
+   * @param {Panel[]} panels Panels to move<ko>위치를 변경할 패널들</ko>
+   * @chainable
+   * @return {this}
+   */
   public resetPanelElementOrder(panels: Panel[]): this {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+    panels.forEach(panel => {
+      panel.resetOffset();
+    });
 
-    if (flicking.circular && !flicking.renderOnlyVisible) {
-      panels.forEach(panel => {
-        panel.element.style.order = "0";
-      });
+    if (panels.length > 0) {
+      this.trigger("orderChanged");
     }
+    return this;
+  }
 
-    return super.resetPanelElementOrder(panels);
+  /**
+   * Remove panel elements
+   * @ko 패널 엘리먼트들을 삭제한다
+   * @param {Panel[]} panels Panels to remove<ko>삭제할 패널들</ko>
+   * @chainable
+   * @return {this}
+   */
+  public removePanelElements(panels: Panel[]): this {
+    // DO NOTHING
+    return this;
   }
+
+  /**
+   * Remove all child nodes inside the given element
+   * @ko 주어진 엘리먼트 내의 모든 child node를 제거한다
+   * @param element A HTMLElement to remove all child nodes<ko>Child node를 전부 삭제할 HTMLElement</ko>
+   * @chainable
+   * @return {this}
+   */
+  public removeAllChildNodes(element: HTMLElement): this {
+    // DO NOTHING
+    return this;
+  }
+
+  /**
+   * Remove all text nodes inside the given element
+   * @ko 주어진 엘리먼트 내의 모든 text node를 제거한다
+   * @param element A HTMLElement to remove all text nodes<ko>Text node를 전부 삭제할 HTMLElement</ko>
+   * @chainable
+   * @return {this}
+   */
+  public removeAllTextNodes(element: HTMLElement): this {
+    // DO NOTHING
+    return this;
+  }
 }
 
 export default OffsetManipulator;

src/renderer/RawRenderer.ts

@@ -7,3 +7,13 @@ /*
 
+/**
+ * A {@link Renderer} that always renders all panel elements inside the camera element
+ * @ko 모든 패널 엘리먼트를 카메라 엘리먼트 내에 항상 렌더링하는 종류의 {@link Renderer}
+ */
 class RawRenderer extends Renderer {
+  /**
+   * Render panel elements inside the camera element
+   * @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
+   * @chainable
+   * @return {this}
+   */
   public render() { return this; }
@@ -10,0 +20,0 @@ }

src/renderer/Renderer.ts

@@ -7,3 +7,3 @@ /*
 import Panel from "~/core/Panel";
-import ExternalManipulator from "~/renderer/ExternalManipulator";
+import OffsetManipulator from "~/renderer/OffsetManipulator";
 import { ALIGN } from "~/const/external";
@@ -15,9 +15,13 @@ import { getFlickingAttached, getMinusCompensatedIndex, includes, parseElement, toArray } from "~/utils";
   align: FlickingOptions["align"];
-  elementManipulator: ExternalManipulator;
+  elementManipulator: OffsetManipulator;
 }
 
+/**
+ * A component that manages {@link Panel} and its elements
+ * @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트
+ */
 abstract class Renderer {
   // Internal States
   protected _flicking: Flicking | null;
-  protected _elementManipulator: ExternalManipulator;
+  protected _elementManipulator: OffsetManipulator;
   protected _panels: Panel[];
@@ -29,7 +33,31 @@
   // Internal states Getter
+  /**
+   * Array of panels
+   * @ko 전체 패널들의 배열
+   * @type {Panel[]}
+   * @readonly
+   * @see Panel
+   */
   public get panels() { return this._panels; }
+  /**
+   * Count of panels
+   * @ko 전체 패널의 개수
+   * @type {number}
+   * @readonly
+   */
   public get panelCount() { return this._panels.length; }
+  /**
+   * An instance of the {@link OffsetManipulator} that Renderer's using
+   * @ko Renderer가 현재 사용중인 {@link OffsetManipulator}의 인스턴스
+   * @type {OffsetManipulator}
+   * @readonly
+   */
   public get elementManipulator() { return this._elementManipulator; }
 
   // Options Getter
+  /**
+   * A {@link Panel}'s {@link Panel#align align} value that applied to all panels
+   * @ko {@link Panel}에 공통적으로 적용할 {@link Panel#align align} 값
+   * @type {Constants.ALIGN | string | number}
+   */
   public get align() { return this._align; }
@@ -45,5 +73,10 @@
 
+  /**
+   * @param {object} options An options object<ko>옵션 오브젝트</ko>
+   * @param {Constants.ALIGN | string | number} [options.align] An {@link Flicking#align align} value that will be applied to all panels<ko>전체 패널에 적용될 {@link Flicking#align align} 값</ko>
+   * @param {OffsetManipulator} [options.elementManipulator] An instance of {@link OffsetManipulator} that renderer will use<ko>Renderer가 사용할 {@link OffsetManipulator}의 인스턴스</ko>
+   */
   public constructor({
     align = ALIGN.CENTER,
-    elementManipulator = new ExternalManipulator()
+    elementManipulator = new OffsetManipulator()
   }: Partial<RendererOptions> = {}) {
@@ -56,4 +89,22 @@ this._align = align;
 
+  /**
+   * Render panel elements inside the camera element
+   * @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
+   * @method
+   * @abstract
+   * @memberof Renderer
+   * @instance
+   * @name render
+   * @chainable
+   * @return {this}
+   */
   public abstract render(): this;
 
+  /**
+   * Initialize Renderer
+   * @ko Renderer를 초기화합니다
+   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
+   * @chainable
+   * @return {this}
+   */
   public init(flicking: Flicking): this {
@@ -66,2 +117,7 @@ this._flicking = flicking;
 
+  /**
+   * Destroy Renderer and return to initial state
+   * @ko Renderer를 초기 상태로 되돌립니다
+   * @return {void}
+   */
   public destroy(): void {
@@ -73,2 +129,8 @@ this._flicking = null;
 
+  /**
+   * Return the {@link Panel} at the given index. `null` if it doesn't exists.
+   * @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.
+   * @return {Panel | null} Panel at the given index<ko>주어진 인덱스에 해당하는 패널</ko>
+   * @see Panel
+   */
   public getPanel(index: number): Panel | null {
@@ -78,2 +140,12 @@ return this._panels[index] || null;
 
+  /**
+   * Insert new panels at given index
+   * This will increase index of panels after by the number of panels added
+   * @ko 주어진 인덱스에 새로운 패널들을 추가합니다
+   * 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
+   * @param {number} index Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
+   * @param {Flicking.ElementLike | Flicking.ElementLike[]} element A new HTMLElement, a outerHTML of element, or an array of both
+   * <ko>새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열</ko>
+   * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
+   */
   public insert(index: number, element: ElementLike | ElementLike[]): Panel[] {
@@ -84,3 +156,3 @@ const panels = this._panels;
 
-    const { camera, control } = flicking;
+    const { control } = flicking;
     const align = this._getPanelAlign();
@@ -116,6 +188,3 @@
     // Update camera & control
-    camera.updateRange();
-    camera.updateAnchors();
-    camera.resetNeedPanelHistory();
-    control.updateInput();
+    this._updateCameraAndControl();
 
@@ -127,3 +196,5 @@ this.render();
     if (newPanels.length > 0 && !control.animating) {
-      void control.moveToPanel(control.activePanel || newPanels[0], 0).catch(() => void 0);
+      void control.moveToPanel(control.activePanel || newPanels[0], {
+        duration: 0
+      }).catch(() => void 0);
     }
@@ -134,2 +205,11 @@
 
+  /**
+   * Remove the panel at the given index
+   * This will decrease index of panels after by the number of panels removed
+   * @ko 주어진 인덱스의 패널을 제거합니다
+   * 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
+   * @param {number} index Index of panel to remove<ko>제거할 패널의 인덱스</ko>
+   * @param {number} [deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
+   * @return An array of removed panels<ko>제거된 패널들의 배열</ko>
+   */
   public remove(index: number, deleteCount: number = 1): Panel[] {
@@ -164,6 +244,3 @@ const panels = this._panels;
     // Update camera & control
-    camera.updateRange();
-    camera.updateAnchors();
-    camera.resetNeedPanelHistory();
-    control.updateInput();
+    this._updateCameraAndControl();
 
@@ -183,3 +260,5 @@ if (includes(panelsRemoved, activePanel)) {
       if (targetPanel) {
-        void control.moveToPanel(targetPanel, 0).catch(() => void 0);
+        void control.moveToPanel(targetPanel, {
+          duration: 0
+        }).catch(() => void 0);
       } else {
@@ -194,2 +273,8 @@ // All panels removed
 
+  /**
+   * Update all panel sizes
+   * @ko 모든 패널의 크기를 업데이트합니다
+   * @chainable
+   * @return {this}
+   */
   public updatePanelSize(): this {
@@ -233,4 +318,14 @@ this._panels.forEach(panel => panel.resize());
   }
+
+  protected _updateCameraAndControl() {
+    const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const { camera, control } = flicking;
+
+    camera.updateRange();
+    camera.updateAnchors();
+    camera.resetNeedPanelHistory();
+    control.updateInput();
+  }
 }
 
 export default Renderer;

src/renderer/VisibleRenderer.ts

@@ -9,3 +9,13 @@ /*
 
+/**
+ * A {@link Renderer} that renders only visible panel elements({@link Camera#visiblePanels visiblePanels}) inside the camera element
+ * @ko 현재 카메라의 보이는 패널들({@link Camera#visiblePanels visiblePanels})만을 카메라 엘리먼트 내에 렌더링하는 종류의 {@link Renderer}
+ */
 class VisibleRenderer extends RawRenderer {
+  /**
+   * Render visible panel elements inside the camera element
+   * @ko 보이는 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
+   * @chainable
+   * @return {this}
+   */
   public render() {
@@ -12,0 +22,0 @@ const flicking = getFlickingAttached(this._flicking, "Renderer");

src/type/event.ts

@@ -12,4 +12,25 @@ /*
 
+/**
+ * Event that fires when Flicking's {@link Flicking#init init()} is called
+ * @ko Flicking의 {@link Flicking#init init()}이 호출되었을 때 발생하는 이벤트
+ * @event Flicking#ready
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ */
 export type ReadyEvent = ComponentEvent;
 
+/**
+ * Event that fires when Flicking's {@link Flicking#resize resize()} is called, before updating the sizes of panels and viewport.
+ * You can update the sizes of panels and viewport with this event, and it'll be applied after {@link Flicking#resize resize()} is finished.
+ * @ko Flicking의 {@link Flicking#resize resize())}이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트하기 전에 발생합니다.
+ * 이 이벤트 단계에서 패널 및 뷰포트의 크기를 업데이트할 경우, 해당 크기가 최종적으로 반영됩니다.
+ * @event Flicking#beforeResize
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {number} width Previous width of the viewport<ko>기존 뷰포트 너비</ko>
+ * @property {number} height Previous height of the viewport<ko>기존 뷰포트 높이</ko>
+ * @property {HTMLElement} element The viewport element<ko>뷰포트 엘리먼트</ko>
+ */
 export interface BeforeResizeEvent extends ComponentEvent {
@@ -21,2 +42,17 @@ width: number;
 
+/**
+ * Event that fires when Flicking's {@link Flicking#resize resize()} is called, after updating the sizes of panels and viewport.
+ * @ko Flicking의 {@link Flicking#resize resize())}이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트한 이후에 발생합니다.
+ * @event Flicking#afterResize
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {number} width New width of the viewport<ko>업데이트된 뷰포트 너비</ko>
+ * @property {number} height New height of the viewport<ko>업데이트된 뷰포트 높이</ko>
+ * @property {object} prev Previous size of the viewport<ko>기존 뷰포트 크기</ko>
+ * @property {number} [prev.width] Previous width of the viewport<ko>기존 뷰포트 너비</ko>
+ * @property {number} [prev.height] Previous height of the viewport<ko>기존 뷰포트 높이</ko>
+ * @property {boolean} sizeChanged A Boolean value indicating whether the width/height of the viewport element is changed<ko>뷰포트 너비/크기가 변경되었는지 여부를 나타내는 값</ko>
+ * @property {HTMLElement} element The viewport element<ko>뷰포트 엘리먼트</ko>
+ */
 export interface AfterResizeEvent extends ComponentEvent {
@@ -34,15 +70,11 @@ width: number;
 /**
- * @typedef
- * @type object
- * @memberof eg.Flicking
- * @property {string} type Name of the event.<ko>이벤트명</ko>
- * @property {number} index Index number of the current panel.<ko>현재 패널의 인덱스 번호.</ko>
- * @property {eg.Flicking.FlickingPanel|null} panel Current panel.<ko> 현재 패널.</ko>
- * @property {number} progress Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel.<ko>첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.</ko>
- * @property {boolean} isTrusted `true` when the event was generated by a user action("mouse" or "touch") otherwise `false`.<ko>사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.</ko>
- * @property {boolean} holding Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.)<ko>사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)</ko>
- * @property {function} stop Cancel the default action, and prevents every events after it.<br>Not effective with events postfixed with `-End`<ko>이벤트의 기본동작을 취소하고, 해당 이벤트 뒤에 발생할 이벤트들을 전부 발생하지 않도록 한다.<br>`-End`가 접미사로 붙은 이벤트에서는 유효한 동작을 하지 않는다.</ko>
- * @property {"PREV" | "NEXT" | null} direction Direction of the panel movement. `null` if not moved at all.<ko>패널 이동 방향. 아직 움직이지 않았을 경우 `null`이다.</ko>
- * @property {object | undefined} axesEvent Original event emitted from {@link https://naver.github.io/egjs-axes/release/latest/doc/ Axes} instance.<ko>내부의 {@link https://naver.github.io/egjs-axes/release/latest/doc Axes} 인스턴스로부터 발생된 원본 이벤트.</ko>
- * @property {eg.Flicking} currentTarget Flicking instance that triggered event.<ko>이벤트를 발생시킨 Flicking의 인스턴스</ko>
+ * Event that fires when user started dragging.
+ * @ko 사용자가 드래그를 시작했을 때 발생하는 이벤트
+ * @event Flicking#holdStart
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {function} stop Stop the event action and prevent user from dragging<ko>이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.</ko>
+ * @property {object} axesEvent {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} event of {@link https://naver.github.io/egjs-axes/ Axes}
+ * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} 이벤트</ko>
  */
@@ -53,2 +85,12 @@ export interface HoldStartEvent extends ComponentEvent {
 
+/**
+ * Event that fires when user stopped dragging.
+ * @ko 사용자가 드래그를 끝냈을 때 발생하는 이벤트
+ * @event Flicking#holdEnd
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {object} axesEvent {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}
+ * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
+ */
 export interface HoldEndEvent extends ComponentEvent {
@@ -58,2 +100,16 @@ axesEvent: OnRelease;
 
+/**
+ * Event that fires once before first {@link Flicking#event:move move} event
+ * @ko 첫 번째 {@link Flicking#event:move move} 이벤트 직전에 단 한번 발생하는 이벤트
+ * @event Flicking#moveStart
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {function} stop Stop the event action and prevent user from dragging<ko>이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.</ko>
+ * @property {boolean} isTrusted Boolean that indicates whether the event was generated by a user action<ko>이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값</ko>
+ * @property {boolean} holding Boolean that indicates whether the user is dragging the viewport element<ko>사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값</ko>
+ * @property {Constants.DIRECTION} direction Moving direction relative to previous position of the camera<ko>이전 카메라 위치 대비 이동 방향</ko>
+ * @property {object} axesEvent {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event of {@link https://naver.github.io/egjs-axes/ Axes}
+ * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트</ko>
+ */
 export interface MoveStartEvent extends ComponentEvent {
@@ -66,2 +122,16 @@ isTrusted: boolean;
 
+/**
+ * Event that fires for every movement
+ * @ko 이동시마다 발생하는 이벤트
+ * @event Flicking#move
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {function} stop Stop the event action and prevent user from dragging<ko>이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.</ko>
+ * @property {boolean} isTrusted Boolean that indicates whether the event was generated by a user action<ko>이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값</ko>
+ * @property {boolean} holding Boolean that indicates whether the user is dragging the viewport element<ko>사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값</ko>
+ * @property {Constants.DIRECTION} direction Moving direction relative to previous position of the camera<ko>이전 카메라 위치 대비 이동 방향</ko>
+ * @property {object} axesEvent {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event of {@link https://naver.github.io/egjs-axes/ Axes}
+ * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트</ko>
+ */
 export interface MoveEvent extends ComponentEvent {
@@ -74,2 +144,15 @@ isTrusted: boolean;
 
+/**
+ * Event that fires when the movement is finished by user input release or animation end.
+ * @ko 사용자 입력 중단/애니메이션 종료 등 이동이 끝났을 때 발생하는 이벤트
+ * @event Flicking#moveEnd
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {boolean} isTrusted Boolean that indicates whether the event was generated by a user action<ko>이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값</ko>
+ * @property {boolean} holding Boolean that indicates whether the user is dragging the viewport element<ko>사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값</ko>
+ * @property {Constants.DIRECTION} direction Moving direction relative to previous position of the camera<ko>이전 카메라 위치 대비 이동 방향</ko>
+ * @property {object} axesEvent {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} event of {@link https://naver.github.io/egjs-axes/ Axes}
+ * <ko>{@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} 이벤트</ko>
+ */
 export interface MoveEndEvent extends ComponentEvent {
@@ -81,3 +164,20 @@ isTrusted: boolean;
 
-export interface ChangeEvent extends ComponentEvent {
+/**
+ * Event that fires when Flicking's active index will be changed. Index will be changed at the {@link Flicking#event:changed changed} event.
+ * It can be triggered when user finished input, or flicking start to move by method.
+ * Calling `stop()` in event will prevent index change and camera movement.
+ * @ko Flicking의 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 {@link Flicking#event:changed changed} 이벤트에서 변경된다.
+ * 사용자가 입력을 마쳤을 때, 혹은 메소드를 통해 이동을 시작했을 때 발생한다.
+ * 이벤트의 stop()을 호출시 인덱스 변경 및 패널로의 이동을 막는다.
+ * @event Flicking#willChange
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {function} stop Stop the event action and prevent user from dragging<ko>이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.</ko>
+ * @property {number} index New active index<ko>변경할 인덱스</ko>
+ * @property {Panel} panel New active panel<ko>인덱스 변경 이후 활성화된 패널로 설정할 패널</ko>
+ * @property {boolean} isTrusted Boolean that indicates whether the event was generated by a user action<ko>이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값</ko>
+ * @property {Constants.DIRECTION} direction Moving direction from the active panel to the target panel<ko>현재 활성화된 패널로부터 이동하고자 하는 패널의 방향</ko>
+ */
+export interface WillChangeEvent extends ComponentEvent {
   index: number;
@@ -87,13 +187,70 @@ panel: Panel;
   direction: ValueOf<typeof DIRECTION>;
-  axesEvent?: OnRelease;
 }
 
-export interface RestoreEvent extends ComponentEvent {
+/**
+ * Event that fires when Flicking's index is changed.
+ * @event Flicking#changed
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {number} index New index<ko>새 인덱스</ko>
+ * @property {Panel} panel New active panel<ko>새로 선택된 패널</ko>
+ * @property {number} prevIndex Previous index<ko>이전 인덱스</ko>
+ * @property {Panel | null} prevPanel Previous active panel<ko>이전 패널</ko>
+ * @property {boolean} isTrusted Boolean that indicates whether the event was generated by a user action<ko>이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값</ko>
+ * @property {Constants.DIRECTION} direction Moving direction from the active panel to the target panel<ko>현재 활성화된 패널로부터 이동하고자 하는 패널의 방향</ko>
+ */
+export interface ChangedEvent extends ComponentEvent {
   index: number;
   panel: Panel;
+  prevIndex: number;
+  prevPanel: Panel | null;
   isTrusted: boolean;
   direction: ValueOf<typeof DIRECTION>;
-  axesEvent?: OnRelease;
 }
 
+/**
+ * Event fires when user drag amount not reached {@link Flicking#threshold threshold} and is returning to {@link Flicking#currentPanel currentPanel}
+ * @ko 사용자가 드래그하여 이동한 거리가 {@link Flicking#threshold threshold}에 도달하지 못해, 기존 {@link Flicking#currentPanel currentPanel}로 돌아갈 것임을 나타내는 이벤트
+ * @event Flicking#willRestore
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {function} stop Stop the event action and prevent user from dragging<ko>이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다</ko>
+ * @property {number} index Index of the panel to restore<ko>복귀하고자 하는 패널의 인덱스</ko>
+ * @property {Panel} panel Panel to restore<ko>복귀하고자 하는 패널</ko>
+ * @property {boolean} isTrusted Boolean that indicates whether the event was generated by a user action<ko>이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값</ko>
+ * @property {Constants.DIRECTION} direction Moving direction relative to previous position of the camera<ko>이전 카메라 위치 대비 이동 방향</ko>
+ */
+export interface WillRestoreEvent extends ComponentEvent {
+  index: number;
+  panel: Panel;
+  isTrusted: boolean;
+  direction: ValueOf<typeof DIRECTION>;
+}
+
+/**
+ * Event that fires when Flicking has returned to {@link Flicking#currentPanel currentPanel}
+ * @ko Flicking이 {@link Flicking#currentPanel currentPanel}의 위치로 다시 돌아왔을 때 발생하는 이벤트
+ * @event Flicking#restored
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {boolean} isTrusted Boolean that indicates whether the event was generated by a user action<ko>이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값</ko>
+ */
+export interface RestoredEvent extends ComponentEvent {
+  isTrusted: boolean;
+}
+
+/**
+ * Event that fires when panel is statically click / touched
+ * @ko 패널이 정적으로 클릭(혹은 터치)되었을 때 발생하는 이벤트
+ * @event Flicking#select
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {number} index Selected panel's index<ko>선택된 패널의 인덱스</ko>
+ * @property {Panel} panel Selected panel<ko>선택된 패널</ko>
+ * @property {Constants.DIRECTION} direction Direction from current camera position to the selected panel's position<ko>현재 카메라 위치 대비 선택된 패널의 위치</ko>
+ */
 export interface SelectEvent extends ComponentEvent {
@@ -105,2 +262,16 @@ index: number;
 
+/**
+ * Event that fires when an empty panel area is visible at the edge of viewport
+ * You can set its threshold with {@link Flicking#needPanelThreshold needPanelThreshold}
+ * @ko 빈 패널 영역이 뷰포트 끝에 도달했을 때 발생하는 이벤트
+ * {@link Flicking#needPanelThreshold needPanelThreshold}를 이용해서 이벤트가 발생하는 지점을 조절할 수 있습니다
+ * @event Flicking#needPanel
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {Constants.DIRECTION} direction Direction where new panel is needed.
+ * `DIRECTION.PREV` means panels should be {@link Flicking#prepend prepend}ed and `DIRECTION.NEXT` means panels should be {@link Flicking#append append}ed
+ * <ko>패널이 필요한 방향.
+ * `DIRECTION.PREV`의 경우 패널이 {@link Flicking#prepend prepend}되어야 함을 의미하고, `DIRECTION.NEXT`는 패널이 {@link Flicking#append append}되어야 함을 의미한다</ko>
+ */
 export interface NeedPanelEvent extends ComponentEvent {
@@ -110,2 +281,13 @@ direction: ValueOf<typeof DIRECTION>;
 
+/**
+ * Event that fires when visible panel inside the viewport changes
+ * @ko 현재 뷰포트 내에서 보이는 패널이 변경되었을 때 발생되는 이벤트
+ * @event Flicking#visibleChange
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {Panel[]} added Panels that added from previous visible panels<ko>새로 보이는 패널의 배열</ko>
+ * @property {Panel[]} removed Panels that removed from previous visible panels<ko>보이지 않게 된 패널의 배열</ko>
+ * @property {Panel[]} visiblePanels Current visible panels<ko>현재 보이는 패널의 배열</ko>
+ */
 export interface VisibleChangeEvent extends ComponentEvent {
@@ -117,4 +299,14 @@ added: Panel[];
 
+/**
+ * Event that fires when camera reaches the maximum/minimum range
+ * @ko 카메라가 이동 가능한 영역의 끝에 도달했을 때 발생하는 이벤트
+ * @event Flicking#reachEdge
+ * @type {object}
+ * @property {Flicking} currentTarget An Flicking instance that triggered this event<ko>이 이벤트를 트리거한 Flicking의 인스턴스</ko>
+ * @property {string} eventType Name of the event<ko>이벤트명</ko>
+ * @property {Constants.DIRECTION} direction Direction indicates whether the camera's position is at the maximum range({@link Constants.DIRECTION DIRECTION.NEXT}) or minimum range({@link Constants.DIRECTION DIRECTION.PREV})
+ * <ko>카메라의 위치가 이동 가능한 범위의 최대점({@link Constants.DIRECTION DIRECTION.NEXT}) 혹은 최소점({@link Constants.DIRECTION DIRECTION.PREV})에 도달했는지를 나타내는 값</ko>
+ */
 export interface ReachEdgeEvent extends ComponentEvent {
   direction: ValueOf<typeof DIRECTION>;
 }

src/type/external.ts

 /**
- * HTML `string` of single/mutiple HTMLElement, or an instance of `HTMLElement`.
- *
- * @ko 단일/복수의 HTMLElement의 outerHTML에 해당하는 `string`, 혹은 `HTMLElement`의 인스턴스.
+ * HTML `string` of single/mutiple HTMLElement, or an instance of `HTMLElement`
+ * @ko 단일/복수의 HTMLElement의 outerHTML에 해당하는 `string`, 혹은 `HTMLElement`의 인스턴스
  * @typedef
- * @memberof eg.Flicking
  */
 export type ElementLike = string | HTMLElement;

tsconfig.eslint.json

@@ -5,2 +5,3 @@ {
     "./**/*.ts",
+    "./**/*.tsx",
     "./**/*.vue",
@@ -7,0 +8,0 @@ "./**/*.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 4 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13595995

increased by598.91%

Dependency count

3

decreased by-25%

Number of package files

365

increased by201.65%

Lines of code

72411

increased by243.85%

Worsened metrics

Dev dependency count

101

increased by6.32%

Number of low license alerts

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

5

increased byInfinity%

Dependency changes

• - Removed@egjs/imready@^1.1.2

• - Removed@cfcs/core@0.0.24(transitive)

• - Removed@egjs/imready@1.4.1(transitive)