@plaidev/karte-action-sdk 1.1.268-29089806.0ded74d0 → 1.1.268-29090020.0f31d4b5

package/dist/svelte5/index.es.js

@@ -5430,11 +5430,11 @@ const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
 const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
 
 var root_1$2 = $.template(`<button><i></i></button>`);
-var root$d = $.template(`<div class="slider svelte-1slel1d"><ul class="slider-list svelte-1slel1d"><!></ul> <div></div></div>`);
+var root$d = $.template(`<div class="slider svelte-wwv1o"><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
 
 const $$css$e = {
-	hash: 'svelte-1slel1d',
-	code: '.slider-list.svelte-1slel1d {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
+	hash: 'svelte-wwv1o',
+	code: '.slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}'
 };
 
 function Slider($$anchor, $$props) {
@@ -5443,7 +5443,6 @@ function Slider($$anchor, $$props) {
 
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
-	const style = $.mutable_state();
 	const baseContainerStyle = $.mutable_state();
 	const containerStyle = $.mutable_state();
 	const indicatorListStyle = $.mutable_state();
@@ -5454,6 +5453,7 @@ function Slider($$anchor, $$props) {
 
 	useInjectCustomizeCss(props());
 
+	let containerElement = $.mutable_state();
 	let slotElement = $.mutable_state();
 	let currentIndex = $.mutable_state(0);
 	let isDragging = false;
@@ -5461,8 +5461,8 @@ function Slider($$anchor, $$props) {
 	let movedX = $.mutable_state(null);
 	let childCount = $.mutable_state(0);
 	let transformX = $.mutable_state();
-
-	console.log('transformX', $.get(transformX));
+	let lastFrame = 0;
+	const THROTTLE = 16;
 
 	const computeTransformX = (
 		index,
@@ -5486,7 +5486,7 @@ function Slider($$anchor, $$props) {
 
 		const moved = movedX ? ` + ${-movedX}px` : '';
 
-		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
+		return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
 	};
 
 	const handleClickIndicator = (index) => {
@@ -5502,8 +5502,6 @@ function Slider($$anchor, $$props) {
 	};
 
 	const toNext = () => {
-		console.log('toNext');
-
 		if ($.get(currentIndex) < $.get(childCount) - 1) {
 			$.set(currentIndex, $.get(currentIndex) + 1);
 		} else if (props().loop) {
@@ -5520,20 +5518,33 @@ function Slider($$anchor, $$props) {
 	};
 
 	const handleClick = (e) => {
-		if (isDragging) {
+		const isParentContainer = (el) => {
+			if (!el) return false;
+			return el === $.get(containerElement) || isParentContainer(el.parentElement);
+		};
+
+		if (isParentContainer(e.target) && isDragging) {
 			e.preventDefault();
 			e.stopPropagation();
 		}
 	};
 
-	const handleTouchmove = (e) => {
-		$.set(movedX, startX - e.touches[0].clientX);
+	const move = (moved) => {
+		$.set(movedX, moved);
 
-		if ($.get(movedX) > 10 || $.get(movedX) < -10) {
+		if ((moved > 10 || moved < -10) && !isDragging) {
 			isDragging = true;
 		}
 	};
 
+	const handleTouchmove = (e) => {
+		const now = performance.now();
+
+		if (now - lastFrame < THROTTLE) return;
+		move(startX - e.touches[0].clientX);
+		lastFrame = now;
+	};
+
 	const handleTouchend = () => {
 		if ($.get(movedX) >= 32) {
 			toNext();
@@ -5551,16 +5562,12 @@ function Slider($$anchor, $$props) {
 		startX = e.touches[0].clientX;
 		isDragging = false;
 		document.addEventListener('touchmove', handleTouchmove, { passive: true });
-		document.addEventListener('touchend', handleTouchend, { passive: true });
-		document.addEventListener('click', handleClick, { capture: true });
+		document.addEventListener('touchend', handleTouchend, { passive: false });
+		document.addEventListener('click', handleClick);
 	};
 
 	const handleMousemove = (e) => {
-		$.set(movedX, startX - e.clientX);
-
-		if ($.get(movedX) > 10 || $.get(movedX) < -10) {
-			isDragging = true;
-		}
+		move(startX - e.clientX);
 	};
 
 	const handleMouseup = (e) => {
@@ -5573,7 +5580,6 @@ function Slider($$anchor, $$props) {
 		$.set(movedX, null);
 
 		if (isDragging) {
-			e.preventDefault();
 			e.stopPropagation();
 		}
 
@@ -5593,7 +5599,6 @@ function Slider($$anchor, $$props) {
 	onMount$1(() => {
 		setChildCount();
 
-		// const childCountTimer = setInterval(setChildCount, 300);
 		let autoSlideTimer;
 
 		if (props().auto) {
@@ -5606,7 +5611,6 @@ function Slider($$anchor, $$props) {
 		}
 
 		return () => {
-			// clearInterval(childCountTimer)
 			if (autoSlideTimer) clearInterval(autoSlideTimer);
 		};
 	});
@@ -5634,10 +5638,6 @@ function Slider($$anchor, $$props) {
 		$.set(itemWidthPercentage, props().itemWidthPercentage ?? 100);
 	});
 
-	$.legacy_pre_effect(() => (objToStyle), () => {
-		$.set(style, objToStyle({ overflow: 'hidden', width: '100%' }));
-	});
-
 	$.legacy_pre_effect(
 		() => (
 			$.get(currentIndex),
@@ -5701,7 +5701,8 @@ function Slider($$anchor, $$props) {
 			borderRadius: '100%',
 			display: 'block',
 			background: '#AAAAAA',
-			border: 0
+			border: 0,
+			cursor: 'pointer'
 		});
 	});
 
@@ -5709,16 +5710,19 @@ function Slider($$anchor, $$props) {
 	$.init();
 
 	var div = root$d();
-	var ul = $.child(div);
+	var div_1 = $.child(div);
+	var ul = $.child(div_1);
 	var node = $.child(ul);
 
 	$.slot(node, $$props, 'default', {}, null);
 	$.reset(ul);
 	$.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
+	$.reset(div_1);
+	$.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
 
-	var div_1 = $.sibling(ul, 2);
+	var div_2 = $.sibling(div_1, 2);
 
-	$.each(div_1, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
+	$.each(div_2, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
 		var button = root_1$2();
 		var i_1 = $.child(button);
 
@@ -5749,15 +5753,14 @@ function Slider($$anchor, $$props) {
 		$.append($$anchor, button);
 	});
 
-	$.reset(div_1);
+	$.reset(div_2);
 	$.reset(div);
 
 	$.template_effect(
 		($0) => {
 			$.set_attribute(div, 'data-layer-id', layerId());
-			$.set_style(div, $.get(style));
 			$.set_style(ul, $0);
-			$.set_style(div_1, $.get(indicatorListStyle));
+			$.set_style(div_2, $.get(indicatorListStyle));
 		},
 		[
 			() => [
@@ -5768,8 +5771,8 @@ function Slider($$anchor, $$props) {
 		$.derived_safe_equal
 	);
 
-	$.event('mousedown', ul, handleMousedown);
-	$.event('touchstart', ul, handleTouchstart);
+	$.event('mousedown', div_1, handleMousedown);
+	$.event('touchstart', div_1, handleTouchstart);
 	$.append($$anchor, div);
 	$.pop();
 }

package/dist/svelte5/index.front2.es.js

@@ -5430,11 +5430,11 @@ const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
 const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
 
 var root_1$2 = $.template(`<button><i></i></button>`);
-var root$d = $.template(`<div class="slider svelte-1slel1d"><ul class="slider-list svelte-1slel1d"><!></ul> <div></div></div>`);
+var root$d = $.template(`<div class="slider svelte-wwv1o"><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
 
 const $$css$e = {
-	hash: 'svelte-1slel1d',
-	code: '.slider-list.svelte-1slel1d {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
+	hash: 'svelte-wwv1o',
+	code: '.slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}'
 };
 
 function Slider($$anchor, $$props) {
@@ -5443,7 +5443,6 @@ function Slider($$anchor, $$props) {
 
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
-	const style = $.mutable_state();
 	const baseContainerStyle = $.mutable_state();
 	const containerStyle = $.mutable_state();
 	const indicatorListStyle = $.mutable_state();
@@ -5454,6 +5453,7 @@ function Slider($$anchor, $$props) {
 
 	useInjectCustomizeCss(props());
 
+	let containerElement = $.mutable_state();
 	let slotElement = $.mutable_state();
 	let currentIndex = $.mutable_state(0);
 	let isDragging = false;
@@ -5461,8 +5461,8 @@ function Slider($$anchor, $$props) {
 	let movedX = $.mutable_state(null);
 	let childCount = $.mutable_state(0);
 	let transformX = $.mutable_state();
-
-	console.log('transformX', $.get(transformX));
+	let lastFrame = 0;
+	const THROTTLE = 16;
 
 	const computeTransformX = (
 		index,
@@ -5486,7 +5486,7 @@ function Slider($$anchor, $$props) {
 
 		const moved = movedX ? ` + ${-movedX}px` : '';
 
-		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
+		return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
 	};
 
 	const handleClickIndicator = (index) => {
@@ -5502,8 +5502,6 @@ function Slider($$anchor, $$props) {
 	};
 
 	const toNext = () => {
-		console.log('toNext');
-
 		if ($.get(currentIndex) < $.get(childCount) - 1) {
 			$.set(currentIndex, $.get(currentIndex) + 1);
 		} else if (props().loop) {
@@ -5520,20 +5518,33 @@ function Slider($$anchor, $$props) {
 	};
 
 	const handleClick = (e) => {
-		if (isDragging) {
+		const isParentContainer = (el) => {
+			if (!el) return false;
+			return el === $.get(containerElement) || isParentContainer(el.parentElement);
+		};
+
+		if (isParentContainer(e.target) && isDragging) {
 			e.preventDefault();
 			e.stopPropagation();
 		}
 	};
 
-	const handleTouchmove = (e) => {
-		$.set(movedX, startX - e.touches[0].clientX);
+	const move = (moved) => {
+		$.set(movedX, moved);
 
-		if ($.get(movedX) > 10 || $.get(movedX) < -10) {
+		if ((moved > 10 || moved < -10) && !isDragging) {
 			isDragging = true;
 		}
 	};
 
+	const handleTouchmove = (e) => {
+		const now = performance.now();
+
+		if (now - lastFrame < THROTTLE) return;
+		move(startX - e.touches[0].clientX);
+		lastFrame = now;
+	};
+
 	const handleTouchend = () => {
 		if ($.get(movedX) >= 32) {
 			toNext();
@@ -5551,16 +5562,12 @@ function Slider($$anchor, $$props) {
 		startX = e.touches[0].clientX;
 		isDragging = false;
 		document.addEventListener('touchmove', handleTouchmove, { passive: true });
-		document.addEventListener('touchend', handleTouchend, { passive: true });
-		document.addEventListener('click', handleClick, { capture: true });
+		document.addEventListener('touchend', handleTouchend, { passive: false });
+		document.addEventListener('click', handleClick);
 	};
 
 	const handleMousemove = (e) => {
-		$.set(movedX, startX - e.clientX);
-
-		if ($.get(movedX) > 10 || $.get(movedX) < -10) {
-			isDragging = true;
-		}
+		move(startX - e.clientX);
 	};
 
 	const handleMouseup = (e) => {
@@ -5573,7 +5580,6 @@ function Slider($$anchor, $$props) {
 		$.set(movedX, null);
 
 		if (isDragging) {
-			e.preventDefault();
 			e.stopPropagation();
 		}
 
@@ -5593,7 +5599,6 @@ function Slider($$anchor, $$props) {
 	onMount$1(() => {
 		setChildCount();
 
-		// const childCountTimer = setInterval(setChildCount, 300);
 		let autoSlideTimer;
 
 		if (props().auto) {
@@ -5606,7 +5611,6 @@ function Slider($$anchor, $$props) {
 		}
 
 		return () => {
-			// clearInterval(childCountTimer)
 			if (autoSlideTimer) clearInterval(autoSlideTimer);
 		};
 	});
@@ -5634,10 +5638,6 @@ function Slider($$anchor, $$props) {
 		$.set(itemWidthPercentage, props().itemWidthPercentage ?? 100);
 	});
 
-	$.legacy_pre_effect(() => (objToStyle), () => {
-		$.set(style, objToStyle({ overflow: 'hidden', width: '100%' }));
-	});
-
 	$.legacy_pre_effect(
 		() => (
 			$.get(currentIndex),
@@ -5701,7 +5701,8 @@ function Slider($$anchor, $$props) {
 			borderRadius: '100%',
 			display: 'block',
 			background: '#AAAAAA',
-			border: 0
+			border: 0,
+			cursor: 'pointer'
 		});
 	});
 
@@ -5709,16 +5710,19 @@ function Slider($$anchor, $$props) {
 	$.init();
 
 	var div = root$d();
-	var ul = $.child(div);
+	var div_1 = $.child(div);
+	var ul = $.child(div_1);
 	var node = $.child(ul);
 
 	$.slot(node, $$props, 'default', {}, null);
 	$.reset(ul);
 	$.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
+	$.reset(div_1);
+	$.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
 
-	var div_1 = $.sibling(ul, 2);
+	var div_2 = $.sibling(div_1, 2);
 
-	$.each(div_1, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
+	$.each(div_2, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
 		var button = root_1$2();
 		var i_1 = $.child(button);
 
@@ -5749,15 +5753,14 @@ function Slider($$anchor, $$props) {
 		$.append($$anchor, button);
 	});
 
-	$.reset(div_1);
+	$.reset(div_2);
 	$.reset(div);
 
 	$.template_effect(
 		($0) => {
 			$.set_attribute(div, 'data-layer-id', layerId());
-			$.set_style(div, $.get(style));
 			$.set_style(ul, $0);
-			$.set_style(div_1, $.get(indicatorListStyle));
+			$.set_style(div_2, $.get(indicatorListStyle));
 		},
 		[
 			() => [
@@ -5768,8 +5771,8 @@ function Slider($$anchor, $$props) {
 		$.derived_safe_equal
 	);
 
-	$.event('mousedown', ul, handleMousedown);
-	$.event('touchstart', ul, handleTouchstart);
+	$.event('mousedown', div_1, handleMousedown);
+	$.event('touchstart', div_1, handleTouchstart);
 	$.append($$anchor, div);
 	$.pop();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.268-29089806.0ded74d0",
+  "version": "1.1.268-29090020.0f31d4b5",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",