@egjs/flicking 4.11.4 → 4.11.5-beta.1

package/dist/flicking.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
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready')) :
@@ -955,6 +955,10 @@ version: 4.11.4
       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;
@@ -1017,9 +1021,13 @@ version: 4.11.4
         }
         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);
         }
@@ -1038,6 +1046,12 @@ version: 4.11.4
         this._enabled = false;
         return this;
       };
+      __proto.observe = function (element) {
+        if (this._resizeObserver) {
+          this._resizeObserver.observe(element);
+        }
+        return this;
+      };
       return AutoResizer;
     }();
 
@@ -4845,6 +4859,11 @@ version: 4.11.4
         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) {
@@ -6260,6 +6279,19 @@ version: 4.11.4
         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
         /**
@@ -7112,6 +7144,9 @@ version: 4.11.4
         // OTHERS
         set: function (val) {
           this._autoResize = val;
+          if (!this._initialized) {
+            return;
+          }
           if (val) {
             this._autoResizer.enable();
           } else {
@@ -7134,7 +7169,7 @@ version: 4.11.4
         },
         set: function (val) {
           this._useResizeObserver = val;
-          if (this._autoResize) {
+          if (this._initialized && this._autoResize) {
             this._autoResizer.enable();
           }
         },
@@ -7931,7 +7966,7 @@ version: 4.11.4
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.11.4";
+      Flicking.VERSION = "4.11.5-beta.1";
       return Flicking;
     }(Component);