swipescroll/dist/index.angular.esm.js

Touch & drag horizontal scroll for carousels on mobile, laptops and desktops

import { initCarouselScroll as initCarouselScroll$1 } from '.src/core/carouselScroll.js';

// src/core/carouselScroll.js
function initCarouselScroll(container) {
  if (!container) return;
  function updateWidth() {
    console.log("Visible width:", container.clientWidth, "Total width:", container.scrollWidth);
  }
  updateWidth();
  window.addEventListener("resize", updateWidth);
  var touchStartX = 0;
  var scrollLeft = 0;

  // Solo manejamos touch
  var handleTouchStart = function handleTouchStart(e) {
    touchStartX = e.touches[0].pageX;
    scrollLeft = container.scrollLeft;
  };
  var handleTouchMove = function handleTouchMove(e) {
    var x = e.touches[0].pageX;
    var walk = (x - touchStartX) * 1.5;
    container.scrollLeft = scrollLeft - walk;
    e.preventDefault(); // evita scroll vertical del navegador
  };
  container.addEventListener("touchstart", handleTouchStart, {
    passive: false
  });
  container.addEventListener("touchmove", handleTouchMove, {
    passive: false
  });
  return function () {
    window.removeEventListener("resize", updateWidth);
    container.removeEventListener("touchstart", handleTouchStart);
    container.removeEventListener("touchmove", handleTouchMove);
  };
}

// src/hooks/angularHook.js

/**
 * Helper para Angular: habilita el scroll horizontal con arrastre (mouse/touch)
 * en un elemento del DOM.
 *
 * @param {HTMLElement} element - Referencia al elemento del carrusel (obtenido con @ViewChild o ElementRef)
 *
 * @example
 * @ViewChild('carousel') carouselRef: ElementRef;
 *
 * ngAfterViewInit() {
 *   useAngularCarouselScroll(this.carouselRef.nativeElement);
 * }
 */
function useAngularCarouselScroll(element) {
  if (element) {
    initCarouselScroll$1(element);
  } else {
    console.warn("useAngularCarouselScroll: elemento no válido");
  }
}

export { initCarouselScroll, useAngularCarouselScroll };
//# sourceMappingURL=index.angular.esm.js.map