@hellotext/hellotext 2.4.2 → 2.4.4

package/lib/controllers/message_controller.cjs

@@ -50,13 +50,15 @@ let _default = /*#__PURE__*/function (_Controller) {
       currentTarget
     }) {
       const card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
+      const messageElement = currentTarget.closest('[data-controller~="hellotext--message"]');
+      const body = currentTarget.dataset.text || currentTarget.textContent.trim();
       this.dispatch('quickReply', {
         detail: {
           id: this.idValue,
-          product: card.dataset.id,
+          product: card === null || card === void 0 ? void 0 : card.dataset.id,
           buttonId: currentTarget.dataset.id,
-          body: currentTarget.dataset.text,
-          cardElement: card
+          body,
+          cardElement: card || messageElement || currentTarget
         }
       });
     }
@@ -98,7 +100,9 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "moveToLeft",
     value: function moveToLeft() {
       if (!this.hasCarouselContainerTarget) return;
-      const scrollAmount = this.getScrollAmount();
+      const nextScrollLeft = this.getPreviousPageScrollLeft();
+      const scrollAmount = this.carouselContainerTarget.scrollLeft - nextScrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: -scrollAmount,
         behavior: 'smooth'
@@ -108,7 +112,9 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "moveToRight",
     value: function moveToRight() {
       if (!this.hasCarouselContainerTarget) return;
-      const scrollAmount = this.getScrollAmount();
+      const nextScrollLeft = this.getNextPageScrollLeft();
+      const scrollAmount = nextScrollLeft - this.carouselContainerTarget.scrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: scrollAmount,
         behavior: 'smooth'
@@ -117,44 +123,157 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "getScrollAmount",
     value: function getScrollAmount() {
-      // Get the actual card width from DOM
+      return this.getCardScrollAmount();
+    }
+  }, {
+    key: "getCardScrollAmount",
+    value: function getCardScrollAmount() {
       const firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card');
       if (!firstCard) {
         return 280; // Fallback to default desktop card width
       }
 
       const cardWidth = firstCard.offsetWidth;
-      const gap = 16; // gap-x-4 = 1rem = 16px
-
-      return cardWidth + gap;
+      return cardWidth + this.getGap();
+    }
+  }, {
+    key: "getPageScrollAmount",
+    value: function getPageScrollAmount() {
+      const scrollAmount = this.carouselContainerTarget.clientWidth - this.getGap();
+      return scrollAmount > 0 ? scrollAmount : this.getCardScrollAmount();
+    }
+  }, {
+    key: "getNextPageScrollLeft",
+    value: function getNextPageScrollLeft() {
+      const currentScrollLeft = this.getCurrentScrollLeft();
+      const viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth;
+      const cardMetrics = this.getCardMetrics();
+      const nextCard = cardMetrics.find(card => card.end > viewportRight + 1);
+      const targetScrollLeft = nextCard ? this.getPageAlignedScrollLeft(nextCard.start) : currentScrollLeft + this.getPageScrollAmount();
+      const fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount();
+      return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft);
+    }
+  }, {
+    key: "getPreviousPageScrollLeft",
+    value: function getPreviousPageScrollLeft() {
+      const currentScrollLeft = this.getCurrentScrollLeft();
+      if (currentScrollLeft <= 1) return 0;
+      const targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0);
+      if (targetThreshold <= 1) return 0;
+      const cardMetrics = this.getCardMetrics();
+      const previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1);
+      const previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1);
+      return this.getPageAlignedScrollLeft((previousPageCard === null || previousPageCard === void 0 ? void 0 : previousPageCard.start) ?? (previousCard === null || previousCard === void 0 ? void 0 : previousCard.start) ?? 0);
+    }
+  }, {
+    key: "getPageAlignedScrollLeft",
+    value: function getPageAlignedScrollLeft(cardStart) {
+      const pageStartOffset = this.getPageStartOffset();
+      if (cardStart <= pageStartOffset + 1) return 0;
+      return this.clampScrollLeft(cardStart - pageStartOffset);
+    }
+  }, {
+    key: "getCardMetrics",
+    value: function getCardMetrics() {
+      return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => {
+        const start = this.getCardScrollLeft(card);
+        return {
+          start,
+          end: start + card.offsetWidth
+        };
+      });
+    }
+  }, {
+    key: "getCardScrollLeft",
+    value: function getCardScrollLeft(card) {
+      const cardRect = card.getBoundingClientRect();
+      const containerRect = this.carouselContainerTarget.getBoundingClientRect();
+      if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) {
+        return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft;
+      }
+      return card.offsetLeft || 0;
+    }
+  }, {
+    key: "getCurrentScrollLeft",
+    value: function getCurrentScrollLeft() {
+      return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft);
+    }
+  }, {
+    key: "clampScrollLeft",
+    value: function clampScrollLeft(scrollLeft) {
+      const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      return Math.min(Math.max(scrollLeft, 0), maxScroll);
+    }
+  }, {
+    key: "getGap",
+    value: function getGap() {
+      const styles = window.getComputedStyle(this.carouselContainerTarget);
+      const gap = Number.parseFloat(styles.columnGap || styles.gap);
+      return Number.isFinite(gap) ? gap : 16;
+    }
+  }, {
+    key: "getFadeDistance",
+    value: function getFadeDistance() {
+      return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64;
+    }
+  }, {
+    key: "getPageStartOffset",
+    value: function getPageStartOffset() {
+      return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0;
     }
   }, {
     key: "updateFades",
     value: function updateFades() {
       if (!this.hasCarouselContainerTarget) return;
-      const scrollLeft = this.carouselContainerTarget.scrollLeft;
-      const maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth;
-
-      // Show left fade if scrolled past start
-      if (scrollLeft > 0) {
-        this.leftFadeTarget.classList.remove('hidden');
-      } else {
-        this.leftFadeTarget.classList.add('hidden');
+      const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      if (maxScroll <= 1) {
+        this.hideFade(this.leftFadeTarget);
+        this.hideFade(this.rightFadeTarget);
+        return;
       }
-
-      // Show right fade if not at end
-      if (scrollLeft < maxScroll - 1) {
-        // -1 for rounding errors
-        this.rightFadeTarget.classList.remove('hidden');
-      } else {
-        this.rightFadeTarget.classList.add('hidden');
+      const scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll);
+      const fadeDistance = this.getFadeDistance();
+      this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance);
+      this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance);
+    }
+  }, {
+    key: "setFadeOpacity",
+    value: function setFadeOpacity(fadeTarget, opacity) {
+      const clampedOpacity = Math.min(Math.max(opacity, 0), 1);
+      if (clampedOpacity <= 0.05) {
+        this.hideFade(fadeTarget);
+        return;
       }
+      fadeTarget.classList.remove('hidden');
+      fadeTarget.removeAttribute('disabled');
+      fadeTarget.removeAttribute('tabindex');
+      fadeTarget.setAttribute('aria-hidden', 'false');
+      fadeTarget.style.opacity = clampedOpacity.toFixed(3);
+      fadeTarget.style.pointerEvents = 'auto';
+    }
+  }, {
+    key: "hideFade",
+    value: function hideFade(fadeTarget) {
+      fadeTarget.style.opacity = '0';
+      fadeTarget.style.pointerEvents = 'none';
+      fadeTarget.setAttribute('aria-hidden', 'true');
+      fadeTarget.setAttribute('tabindex', '-1');
+      if ('disabled' in fadeTarget) fadeTarget.disabled = true;
+      fadeTarget.classList.add('hidden');
     }
   }]);
   return _default;
 }(_stimulus.Controller);
 exports.default = _default;
 _default.values = {
-  id: String
+  fadeDistance: {
+    type: Number,
+    default: 64
+  },
+  id: String,
+  pageStartOffset: {
+    type: Number,
+    default: 0
+  }
 };
 _default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard'];

package/lib/controllers/message_controller.js

@@ -48,13 +48,15 @@ var _default = /*#__PURE__*/function (_Controller) {
         currentTarget
       } = _ref2;
       var card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
+      var messageElement = currentTarget.closest('[data-controller~="hellotext--message"]');
+      var body = currentTarget.dataset.text || currentTarget.textContent.trim();
       this.dispatch('quickReply', {
         detail: {
           id: this.idValue,
-          product: card.dataset.id,
+          product: card === null || card === void 0 ? void 0 : card.dataset.id,
           buttonId: currentTarget.dataset.id,
-          body: currentTarget.dataset.text,
-          cardElement: card
+          body,
+          cardElement: card || messageElement || currentTarget
         }
       });
     }
@@ -93,7 +95,9 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "moveToLeft",
     value: function moveToLeft() {
       if (!this.hasCarouselContainerTarget) return;
-      var scrollAmount = this.getScrollAmount();
+      var nextScrollLeft = this.getPreviousPageScrollLeft();
+      var scrollAmount = this.carouselContainerTarget.scrollLeft - nextScrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: -scrollAmount,
         behavior: 'smooth'
@@ -103,7 +107,9 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "moveToRight",
     value: function moveToRight() {
       if (!this.hasCarouselContainerTarget) return;
-      var scrollAmount = this.getScrollAmount();
+      var nextScrollLeft = this.getNextPageScrollLeft();
+      var scrollAmount = nextScrollLeft - this.carouselContainerTarget.scrollLeft;
+      if (scrollAmount < 1) return;
       this.carouselContainerTarget.scrollBy({
         left: scrollAmount,
         behavior: 'smooth'
@@ -112,44 +118,158 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "getScrollAmount",
     value: function getScrollAmount() {
-      // Get the actual card width from DOM
+      return this.getCardScrollAmount();
+    }
+  }, {
+    key: "getCardScrollAmount",
+    value: function getCardScrollAmount() {
       var firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card');
       if (!firstCard) {
         return 280; // Fallback to default desktop card width
       }
 
       var cardWidth = firstCard.offsetWidth;
-      var gap = 16; // gap-x-4 = 1rem = 16px
-
-      return cardWidth + gap;
+      return cardWidth + this.getGap();
+    }
+  }, {
+    key: "getPageScrollAmount",
+    value: function getPageScrollAmount() {
+      var scrollAmount = this.carouselContainerTarget.clientWidth - this.getGap();
+      return scrollAmount > 0 ? scrollAmount : this.getCardScrollAmount();
+    }
+  }, {
+    key: "getNextPageScrollLeft",
+    value: function getNextPageScrollLeft() {
+      var currentScrollLeft = this.getCurrentScrollLeft();
+      var viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth;
+      var cardMetrics = this.getCardMetrics();
+      var nextCard = cardMetrics.find(card => card.end > viewportRight + 1);
+      var targetScrollLeft = nextCard ? this.getPageAlignedScrollLeft(nextCard.start) : currentScrollLeft + this.getPageScrollAmount();
+      var fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount();
+      return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft);
+    }
+  }, {
+    key: "getPreviousPageScrollLeft",
+    value: function getPreviousPageScrollLeft() {
+      var _ref4, _previousPageCard$sta;
+      var currentScrollLeft = this.getCurrentScrollLeft();
+      if (currentScrollLeft <= 1) return 0;
+      var targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0);
+      if (targetThreshold <= 1) return 0;
+      var cardMetrics = this.getCardMetrics();
+      var previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1);
+      var previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1);
+      return this.getPageAlignedScrollLeft((_ref4 = (_previousPageCard$sta = previousPageCard === null || previousPageCard === void 0 ? void 0 : previousPageCard.start) !== null && _previousPageCard$sta !== void 0 ? _previousPageCard$sta : previousCard === null || previousCard === void 0 ? void 0 : previousCard.start) !== null && _ref4 !== void 0 ? _ref4 : 0);
+    }
+  }, {
+    key: "getPageAlignedScrollLeft",
+    value: function getPageAlignedScrollLeft(cardStart) {
+      var pageStartOffset = this.getPageStartOffset();
+      if (cardStart <= pageStartOffset + 1) return 0;
+      return this.clampScrollLeft(cardStart - pageStartOffset);
+    }
+  }, {
+    key: "getCardMetrics",
+    value: function getCardMetrics() {
+      return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => {
+        var start = this.getCardScrollLeft(card);
+        return {
+          start,
+          end: start + card.offsetWidth
+        };
+      });
+    }
+  }, {
+    key: "getCardScrollLeft",
+    value: function getCardScrollLeft(card) {
+      var cardRect = card.getBoundingClientRect();
+      var containerRect = this.carouselContainerTarget.getBoundingClientRect();
+      if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) {
+        return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft;
+      }
+      return card.offsetLeft || 0;
+    }
+  }, {
+    key: "getCurrentScrollLeft",
+    value: function getCurrentScrollLeft() {
+      return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft);
+    }
+  }, {
+    key: "clampScrollLeft",
+    value: function clampScrollLeft(scrollLeft) {
+      var maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      return Math.min(Math.max(scrollLeft, 0), maxScroll);
+    }
+  }, {
+    key: "getGap",
+    value: function getGap() {
+      var styles = window.getComputedStyle(this.carouselContainerTarget);
+      var gap = Number.parseFloat(styles.columnGap || styles.gap);
+      return Number.isFinite(gap) ? gap : 16;
+    }
+  }, {
+    key: "getFadeDistance",
+    value: function getFadeDistance() {
+      return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64;
+    }
+  }, {
+    key: "getPageStartOffset",
+    value: function getPageStartOffset() {
+      return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0;
     }
   }, {
     key: "updateFades",
     value: function updateFades() {
       if (!this.hasCarouselContainerTarget) return;
-      var scrollLeft = this.carouselContainerTarget.scrollLeft;
-      var maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth;
-
-      // Show left fade if scrolled past start
-      if (scrollLeft > 0) {
-        this.leftFadeTarget.classList.remove('hidden');
-      } else {
-        this.leftFadeTarget.classList.add('hidden');
+      var maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0);
+      if (maxScroll <= 1) {
+        this.hideFade(this.leftFadeTarget);
+        this.hideFade(this.rightFadeTarget);
+        return;
       }
-
-      // Show right fade if not at end
-      if (scrollLeft < maxScroll - 1) {
-        // -1 for rounding errors
-        this.rightFadeTarget.classList.remove('hidden');
-      } else {
-        this.rightFadeTarget.classList.add('hidden');
+      var scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll);
+      var fadeDistance = this.getFadeDistance();
+      this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance);
+      this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance);
+    }
+  }, {
+    key: "setFadeOpacity",
+    value: function setFadeOpacity(fadeTarget, opacity) {
+      var clampedOpacity = Math.min(Math.max(opacity, 0), 1);
+      if (clampedOpacity <= 0.05) {
+        this.hideFade(fadeTarget);
+        return;
       }
+      fadeTarget.classList.remove('hidden');
+      fadeTarget.removeAttribute('disabled');
+      fadeTarget.removeAttribute('tabindex');
+      fadeTarget.setAttribute('aria-hidden', 'false');
+      fadeTarget.style.opacity = clampedOpacity.toFixed(3);
+      fadeTarget.style.pointerEvents = 'auto';
+    }
+  }, {
+    key: "hideFade",
+    value: function hideFade(fadeTarget) {
+      fadeTarget.style.opacity = '0';
+      fadeTarget.style.pointerEvents = 'none';
+      fadeTarget.setAttribute('aria-hidden', 'true');
+      fadeTarget.setAttribute('tabindex', '-1');
+      if ('disabled' in fadeTarget) fadeTarget.disabled = true;
+      fadeTarget.classList.add('hidden');
     }
   }]);
   return _default;
 }(Controller);
 _default.values = {
-  id: String
+  fadeDistance: {
+    type: Number,
+    default: 64
+  },
+  id: String,
+  pageStartOffset: {
+    type: Number,
+    default: 0
+  }
 };
 _default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard'];
 export { _default as default };

package/lib/controllers/mixins/usePopover.cjs

@@ -48,6 +48,8 @@ const usePopover = controller => {
     openValueChanged() {
       if (this.disabledValue) return;
       if (this.openValue) {
+        var _this$preparePopoverO;
+        (_this$preparePopoverO = this.preparePopoverOpenAnimation) === null || _this$preparePopoverO === void 0 ? void 0 : _this$preparePopoverO.call(this);
         this.popoverTarget.showPopover();
         this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {

package/lib/controllers/mixins/usePopover.js

@@ -44,6 +44,8 @@ export var usePopover = controller => {
     openValueChanged() {
       if (this.disabledValue) return;
       if (this.openValue) {
+        var _this$preparePopoverO;
+        (_this$preparePopoverO = this.preparePopoverOpenAnimation) === null || _this$preparePopoverO === void 0 ? void 0 : _this$preparePopoverO.call(this);
         this.popoverTarget.showPopover();
         this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {

package/lib/controllers/webchat/useTeaser.cjs

@@ -118,7 +118,9 @@ const useTeaser = controller => {
       return messages.some(message => message !== this.messageTemplateTarget);
     },
     teaserSeenKey() {
-      return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen`;
+      const teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : '';
+      const versionSegment = teaserVersion ? `:${teaserVersion}` : '';
+      return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen${versionSegment}`;
     },
     teaserSeenForSession() {
       try {

package/lib/controllers/webchat/useTeaser.js

@@ -112,7 +112,9 @@ export var useTeaser = controller => {
       return messages.some(message => message !== this.messageTemplateTarget);
     },
     teaserSeenKey() {
-      return "hellotext:webchat:".concat(this.idValue || this.element.id, ":teaser-seen");
+      var teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : '';
+      var versionSegment = teaserVersion ? ":".concat(teaserVersion) : '';
+      return "hellotext:webchat:".concat(this.idValue || this.element.id, ":teaser-seen").concat(versionSegment);
     },
     teaserSeenForSession() {
       try {