@egjs/flicking 4.11.4 → 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.4
+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;
@@ -970,9 +974,13 @@ var AutoResizer = /*#__PURE__*/function () {
     }
     if (flicking.useResizeObserver && !!window.ResizeObserver) {
       var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
-      var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
-      resizeObserver.observe(flicking.viewport.element);
-      this._resizeObserver = resizeObserver;
+      var resizeObserver_1 = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
+      __spread([flicking.viewport.element, flicking.camera.element], flicking.panels.map(function (panel) {
+        return panel.element;
+      })).forEach(function (element) {
+        resizeObserver_1.observe(element);
+      });
+      this._resizeObserver = resizeObserver_1;
     } else {
       window.addEventListener("resize", this._onResize);
     }
@@ -991,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;
 }();
 
@@ -4764,6 +4778,11 @@ var Renderer = /*#__PURE__*/function () {
     var activePanel = control.activePanel;
     // Update camera & control
     this._updateCameraAndControl();
+    if (flicking.autoResize && flicking.useResizeObserver) {
+      panelsAdded.forEach(function (panel) {
+        flicking.autoResizer.observe(panel.element);
+      });
+    }
     void this.render();
     if (!flicking.animating) {
       if (!activePanel || activePanel.removed) {
@@ -6165,6 +6184,19 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "autoResizer", {
+    /**
+     * {@link AutoResizer} instance of the Flicking
+     * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
+     * @internal
+     * @readonly
+     */
+    get: function () {
+      return this._autoResizer;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "initialized", {
     // Internal States
     /**
@@ -7017,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 {
@@ -7039,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();
       }
     },
@@ -7836,7 +7871,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.11.4";
+  Flicking.VERSION = "4.11.5-beta.1";
   return Flicking;
 }(Component);