@asante-org/atlascopco-vt-litesitegenerator 3.6.8 → 3.6.10

package/dist/index.esm.js

@@ -3937,6 +3937,7 @@ var LsgHeroController = /** @class */function () {
     this.embla = null;
     this.autoplayTimer = null;
     this.contentObserver = null;
+    this.rafId = null;
     this.scrollPrev = function () {
       var _a;
       (_a = _this.embla) === null || _a === void 0 ? void 0 : _a.scrollPrev();
@@ -3974,33 +3975,53 @@ var LsgHeroController = /** @class */function () {
     this.mount(viewport);
   }
   LsgHeroController.prototype.mount = function (viewport) {
+    var _this = this;
     var _a, _b, _c;
-    var plugins = this.opts.transition === "fade" ? [Fade()] : [];
-    this.embla = EmblaCarousel(viewport, {
-      loop: true
-    }, plugins);
-    if (this.opts.autoplay) {
-      this.startAutoplay();
-      this.embla.on("pointerDown", this.stopAutoplay);
-      this.embla.on("pointerUp", this.startAutoplay);
-    }
     (_a = this.els.prevBtn) === null || _a === void 0 ? void 0 : _a.addEventListener("click", this.scrollPrev);
     (_b = this.els.nextBtn) === null || _b === void 0 ? void 0 : _b.addEventListener("click", this.scrollNext);
     (_c = this.els.scrollDownBtn) === null || _c === void 0 ? void 0 : _c.addEventListener("click", this.handleScrollDown);
-    // Sync the first slide's content-wrapper height to a CSS custom property
-    // on the section root so the controls column can match it dynamically.
-    var section = viewport.closest("[data-lsg-is='hero']");
-    var contentWrapper = section === null || section === void 0 ? void 0 : section.querySelector(".lsg-hero-card__content-wrapper");
-    if (section && contentWrapper && typeof ResizeObserver !== "undefined") {
-      var setHeight_1 = function (el) {
-        section.style.setProperty("--lsg-hero-content-height", "".concat(el.offsetHeight, "px"));
-      };
-      setHeight_1(contentWrapper);
-      this.contentObserver = new ResizeObserver(function (entries) {
-        setHeight_1(entries[0].target);
+    // First frame lets React's initial paint settle; second guarantees that
+    // async-injected stylesheets (e.g. --lsg-hero-axis) have been computed.
+    this.rafId = requestAnimationFrame(function () {
+      _this.rafId = requestAnimationFrame(function () {
+        _this.rafId = null;
+        if (!viewport.isConnected) return;
+        var section = viewport.closest("[data-lsg-is='hero']");
+        var axis = section && getComputedStyle(section).getPropertyValue("--lsg-hero-axis").trim() === "y" ? "y" : "x";
+        var plugins = _this.opts.transition === "fade" ? [Fade()] : [];
+        _this.embla = EmblaCarousel(viewport, {
+          loop: true,
+          axis: axis
+        }, plugins);
+        if (_this.opts.autoplay) {
+          _this.startAutoplay();
+          _this.embla.on("pointerDown", _this.stopAutoplay);
+          _this.embla.on("pointerUp", _this.startAutoplay);
+        }
+        // Sync the first slide's content-wrapper height to a CSS custom property
+        // on the section root so the controls column can match it dynamically.
+        var contentWrapper = section === null || section === void 0 ? void 0 : section.querySelector(".lsg-hero-card__content-wrapper");
+        if (section && contentWrapper && typeof ResizeObserver !== "undefined") {
+          var setHeight_1 = function (el) {
+            section.style.setProperty("--lsg-hero-content-height", "".concat(el.offsetHeight, "px"));
+          };
+          setHeight_1(contentWrapper);
+          _this.contentObserver = new ResizeObserver(function (entries) {
+            setHeight_1(entries[0].target);
+          });
+          _this.contentObserver.observe(contentWrapper);
+        }
+        // For vertical carousels the section height (100svh) cascades from a
+        // useEffect-set data-lsg-theme attribute, which may land one frame after
+        // this RAF. Re-measure so Embla has the correct slide dimensions.
+        if (axis === "y") {
+          requestAnimationFrame(function () {
+            var _a;
+            if (viewport.isConnected) (_a = _this.embla) === null || _a === void 0 ? void 0 : _a.reInit();
+          });
+        }
       });
-      this.contentObserver.observe(contentWrapper);
-    }
+    });
   };
   Object.defineProperty(LsgHeroController.prototype, "emblaApi", {
     /** Direct access to the underlying Embla instance for advanced usage. */
@@ -4013,6 +4034,10 @@ var LsgHeroController = /** @class */function () {
   /** Tear down event listeners, autoplay, and the Embla instance. */
   LsgHeroController.prototype.destroy = function () {
     var _a, _b, _c, _d;
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
     this.stopAutoplay();
     (_a = this.contentObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.contentObserver = null;