@asante-org/atlascopco-vt-litesitegenerator 3.8.15 → 3.8.16

package/dist/index.esm.js

@@ -2493,6 +2493,16 @@ var SLIDE_NEXT = "lsg-carousel__slide--next";
 var MEDIA_ITEM_SELECTOR = "[data-lsg-carousel-item]";
 /** Text track slides, one per media slide. */
 var CONTENT_ITEM_SELECTOR = "[data-lsg-carousel-content-item]";
+/**
+ * A text slide's "head" is its leading run of titles: the pre-title and heading
+ * in Storybook, or the leading LSG Title components in AEM (the same
+ * positional mapping LsgCarousel.scss uses).
+ */
+var HEAD_SELECTOR = ".lsg-carousel__pre-title, .lsg-carousel__heading, .cmp-lsg-title";
+/** Marks the last element of each slide's head. */
+var HEAD_END_ATTR = "data-lsg-carousel-head-end";
+/** Set on the root once the head/media measurements below are in place. */
+var MEASURED_ATTR = "data-lsg-carousel-measured";
 var directChildren = function (container, selector) {
   return container ? Array.from(container.children).filter(function (el) {
     return el instanceof HTMLElement && el.matches(selector);
@@ -2512,6 +2522,7 @@ var LsgCarouselController = /** @class */function () {
     this.media = null;
     this.content = null;
     this.syncing = false;
+    this.headObserver = null;
     /**
      * Embla automatically falls back to non-looping mode when there is not enough
      * slide content to create a safe loop (most noticeable with two-up layouts and
@@ -2603,6 +2614,34 @@ var LsgCarouselController = /** @class */function () {
         if (active) slide.removeAttribute("aria-hidden");else slide.setAttribute("aria-hidden", "true");
       });
     };
+    /**
+     * Publishes the geometry a theme needs to place the media column between each
+     * slide's head (pre-title + heading) and its body:
+     *
+     *   root  --lsg-carousel-head-max     tallest head across all slides
+     *         --lsg-carousel-media-block  media column height (cards + dots)
+     *   slide --lsg-carousel-head-height  this slide's own head height
+     *
+     * Every slide pads its head up to the tallest one, so the media never moves
+     * as the text crossfades between headings of different lengths. Themes that
+     * do not opt in ignore these. MEASURED_ATTR is only set when at least one
+     * slide has a head, so a carousel without titles keeps the plain stack.
+     */
+    this.measureSplit = function () {
+      if (!_this.root || !_this.mediaColumn) return;
+      var max = 0;
+      _this.contentSlides.forEach(function (slide, index) {
+        var end = _this.headEnds[index];
+        // Rect deltas, not offsetTop: the slide is not an offset parent. The fade
+        // plugin only translates on X, so the vertical delta is unaffected.
+        var height = end ? Math.ceil(end.getBoundingClientRect().bottom - slide.getBoundingClientRect().top) : 0;
+        slide.style.setProperty("--lsg-carousel-head-height", "".concat(height, "px"));
+        max = Math.max(max, height);
+      });
+      _this.root.style.setProperty("--lsg-carousel-head-max", "".concat(max, "px"));
+      _this.root.style.setProperty("--lsg-carousel-media-block", "".concat(Math.ceil(_this.mediaColumn.getBoundingClientRect().height), "px"));
+      _this.root.toggleAttribute(MEASURED_ATTR, max > 0);
+    };
     this.els = elements;
     this.mediaViewport = viewport;
     this.paginationBtns = elements.paginationBtns ? Array.from(elements.paginationBtns) : [];
@@ -2673,6 +2712,35 @@ var LsgCarouselController = /** @class */function () {
         slides: this.contentSlides
       }, [Fade()]);
     }
+    // Head/media measurements for themes that split the text around the media
+    // on mobile (theme 3). Only paired tracks qualify: the split lays one track
+    // inside the other, which only makes sense when they show the same item.
+    this.root = viewport.closest(".lsg-carousel");
+    this.mediaColumn = viewport.closest(".lsg-carousel__media-column");
+    var heads = [];
+    this.headEnds = this.contentSlides.map(function (slide) {
+      var end = null;
+      for (var _i = 0, _a = Array.from(slide.children); _i < _a.length; _i++) {
+        var child = _a[_i];
+        if (!(child instanceof HTMLElement) || !child.matches(HEAD_SELECTOR)) break;
+        heads.push(child);
+        end = child;
+      }
+      end === null || end === void 0 ? void 0 : end.setAttribute(HEAD_END_ATTR, "");
+      return end;
+    });
+    if (this.content && this.root && this.mediaColumn && typeof ResizeObserver !== "undefined") {
+      // Heads re-wrap with the viewport width and again when web fonts land; the
+      // media column follows the breakpoint's card height. Neither box's size
+      // depends on the variables written below, so this cannot feed back.
+      this.headObserver = new ResizeObserver(this.measureSplit);
+      this.headObserver.observe(this.mediaColumn);
+      heads.forEach(function (head) {
+        var _a;
+        return (_a = _this.headObserver) === null || _a === void 0 ? void 0 : _a.observe(head);
+      });
+      this.measureSplit();
+    }
     this.paginationHandlers = this.paginationBtns.map(function (_, index) {
       return function () {
         var _a;
@@ -2744,7 +2812,7 @@ var LsgCarouselController = /** @class */function () {
   });
   LsgCarouselController.prototype.destroy = function () {
     var _this = this;
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     (_a = this.els.prevBtn) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", this.scrollPrev);
     (_b = this.els.nextBtn) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.scrollNext);
     this.paginationBtns.forEach(function (button, index) {
@@ -2783,7 +2851,16 @@ var LsgCarouselController = /** @class */function () {
     this.contentSlides.forEach(function (slide) {
       slide.removeAttribute("inert");
       slide.removeAttribute("aria-hidden");
+      slide.style.removeProperty("--lsg-carousel-head-height");
+    });
+    (_e = this.headObserver) === null || _e === void 0 ? void 0 : _e.disconnect();
+    this.headObserver = null;
+    this.headEnds.forEach(function (end) {
+      return end === null || end === void 0 ? void 0 : end.removeAttribute(HEAD_END_ATTR);
     });
+    (_f = this.root) === null || _f === void 0 ? void 0 : _f.style.removeProperty("--lsg-carousel-head-max");
+    (_g = this.root) === null || _g === void 0 ? void 0 : _g.style.removeProperty("--lsg-carousel-media-block");
+    (_h = this.root) === null || _h === void 0 ? void 0 : _h.removeAttribute(MEASURED_ATTR);
   };
   return LsgCarouselController;
 }();