@egjs/flicking 4.11.5-beta.0 → 4.11.5-beta.1

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.11.5-beta.0
+version: 4.11.5-beta.1
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -908,6 +908,10 @@ var Viewport = /*#__PURE__*/function () {
   return Viewport;
 }();
 
+/**
+ * A component that detects size change and trigger resize method when the autoResize option is used
+ * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
+ */
 var AutoResizer = /*#__PURE__*/function () {
   function AutoResizer(flicking) {
     var _this = this;
@@ -971,7 +975,7 @@ var AutoResizer = /*#__PURE__*/function () {
     if (flicking.useResizeObserver && !!window.ResizeObserver) {
       var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
       var resizeObserver_1 = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
-      __spread([flicking.viewport.element], flicking.camera.element ? [flicking.camera.element] : [], flicking.panels.map(function (panel) {
+      __spread([flicking.viewport.element, flicking.camera.element], flicking.panels.map(function (panel) {
         return panel.element;
       })).forEach(function (element) {
         resizeObserver_1.observe(element);
@@ -995,6 +999,12 @@ var AutoResizer = /*#__PURE__*/function () {
     this._enabled = false;
     return this;
   };
+  __proto.observe = function (element) {
+    if (this._resizeObserver) {
+      this._resizeObserver.observe(element);
+    }
+    return this;
+  };
   return AutoResizer;
 }();
 
@@ -4768,8 +4778,10 @@ var Renderer = /*#__PURE__*/function () {
     var activePanel = control.activePanel;
     // Update camera & control
     this._updateCameraAndControl();
-    if (flicking.autoResize) {
-      flicking.autoResizer.enable();
+    if (flicking.autoResize && flicking.useResizeObserver) {
+      panelsAdded.forEach(function (panel) {
+        flicking.autoResizer.observe(panel.element);
+      });
     }
     void this.render();
     if (!flicking.animating) {
@@ -6173,6 +6185,12 @@ var Flicking = /*#__PURE__*/function (_super) {
     configurable: true
   });
   Object.defineProperty(__proto, "autoResizer", {
+    /**
+     * {@link AutoResizer} instance of the Flicking
+     * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
+     * @internal
+     * @readonly
+     */
     get: function () {
       return this._autoResizer;
     },
@@ -7031,6 +7049,9 @@ var Flicking = /*#__PURE__*/function (_super) {
     // OTHERS
     set: function (val) {
       this._autoResize = val;
+      if (!this._initialized) {
+        return;
+      }
       if (val) {
         this._autoResizer.enable();
       } else {
@@ -7053,7 +7074,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     },
     set: function (val) {
       this._useResizeObserver = val;
-      if (this._autoResize) {
+      if (this._initialized && this._autoResize) {
         this._autoResizer.enable();
       }
     },
@@ -7850,7 +7871,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.11.5-beta.0";
+  Flicking.VERSION = "4.11.5-beta.1";
   return Flicking;
 }(Component);