@plaidev/karte-action-sdk 1.1.268-29088092.6390e271 → 1.1.268-29089896.0dceea5e

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-1rafop1"><div class="slider-container svelte-1rafop1"><ul class="slider-list svelte-1rafop1"><!></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-1rafop1',
+	code: '.slider.svelte-1rafop1 {width:100%;overflow:hidden;}.slider-container.svelte-1rafop1 {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-1rafop1 {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
 };
 
 function Slider($$anchor, $$props) {
@@ -5443,7 +5443,7 @@ 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();
 	const indicatorItemStyle = $.mutable_state();
@@ -5458,27 +5458,34 @@ function Slider($$anchor, $$props) {
 	let isDragging = false;
 	let startX = 0;
 	let movedX = $.mutable_state(null);
-	let childCount = $.mutable_state($.get(slotElement)?.children?.length ?? 0);
-
-	const calcTransformX = (index, itemCount, _movedX) => {
-		if (index === 0) return undefined;
-
-		const movingX = (() => {
-			let result = 0;
-			const itemWidth = $.get(itemWidthPercentage);
-			const itemMargin = (100 - $.get(itemWidthPercentage)) / 2;
-
-			const movingMap = [...Array($.get(currentIndex) + 1)].map((_, index) => {
-				if (index === 0) return 0;
-				if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
-				return itemWidth;
-			});
+	let childCount = $.mutable_state(0);
+	let transformX = $.mutable_state();
+
+	console.log('transformX', $.get(transformX));
+
+	const computeTransformX = (
+		index,
+		itemCount,
+		movedX,
+		itemWidthPercentage,
+		gap
+	) => {
+		if (index === 0) return;
+
+		let result = 0;
+		const itemMargin = (100 - itemWidthPercentage) / 2;
+
+		for (let i = 1; i <= index; i++) {
+			if (i === 1 || i === itemCount - 1) {
+				result += itemWidthPercentage - itemMargin;
+			} else {
+				result += itemWidthPercentage;
+			}
+		}
 
-			movingMap.forEach((value) => result += value);
-			return result;
-		})();
+		const moved = movedX ? ` + ${-movedX}px` : '';
 
-		return `translateX(calc(-${movingX}% - ${(props().gap ?? 0) * index}px + ${($.get(movedX) ?? 0) * -1}px))`;
+		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
 	};
 
 	const handleClickIndicator = (index) => {
@@ -5494,6 +5501,8 @@ function Slider($$anchor, $$props) {
 	};
 
 	const toNext = () => {
+		console.log('toNext');
+
 		if ($.get(currentIndex) < $.get(childCount) - 1) {
 			$.set(currentIndex, $.get(currentIndex) + 1);
 		} else if (props().loop) {
@@ -5563,34 +5572,47 @@ function Slider($$anchor, $$props) {
 		$.set(movedX, null);
 
 		if (isDragging) {
-			e.preventDefault();
+			// e.preventDefault()
 			e.stopPropagation();
 		}
 
 		document.removeEventListener('mousemove', handleMousemove);
 		document.removeEventListener('mouseup', handleMouseup);
+		document.removeEventListener('click', handleClick);
 	};
 
 	const handleMousedown = (e) => {
 		startX = e.clientX;
 		isDragging = false;
 		document.addEventListener('mousemove', handleMousemove, { passive: true });
-		document.addEventListener('mouseup', handleMouseup, { passive: true });
+		document.addEventListener('mouseup', handleMouseup, { passive: false });
 		document.addEventListener('click', handleClick, { capture: true });
 	};
 
 	onMount$1(() => {
 		setChildCount();
-		setInterval(setChildCount, 300);
+
+		let autoSlideTimer;
 
 		if (props().auto) {
-			setInterval(
+			autoSlideTimer = setInterval(
 				() => {
 					toNext();
 				},
 				props().interval ?? 5000
 			);
 		}
+
+		return () => {
+			// clearInterval(childCountTimer)
+			if (autoSlideTimer) clearInterval(autoSlideTimer);
+		};
+	});
+
+	$.legacy_pre_effect(() => ($.get(slotElement)), () => {
+		if ($.get(slotElement)) {
+			$.set(childCount, $.get(slotElement).children.length);
+		}
 	});
 
 	$.legacy_pre_effect(
@@ -5610,20 +5632,27 @@ 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),
+			$.get(childCount),
+			$.get(movedX),
+			$.get(itemWidthPercentage),
+			$.deep_read_state(props())
+		),
+		() => {
+			$.set(transformX, computeTransformX($.get(currentIndex), $.get(childCount), $.get(movedX), $.get(itemWidthPercentage), props().gap ?? 0));
+		}
+	);
 
 	$.legacy_pre_effect(
 		() => (
 			$.deep_read_state(props()),
 			$.get(itemWidthPercentage),
-			$.get(movedX),
-			$.get(currentIndex),
-			$.get(childCount)
+			$.get(movedX)
 		),
 		() => {
-			$.set(containerStyle, objToStyle({
+			$.set(baseContainerStyle, {
 				display: 'grid',
 				// marginInline: `-${props.gap}px`,
 				gap: `${props().gap}px`,
@@ -5632,8 +5661,20 @@ function Slider($$anchor, $$props) {
 				gridAutoColumns: `minmax(${$.get(itemWidthPercentage)}%, 1fr)`,
 				flexShrink: 0,
 				transition: $.get(movedX) === null ? 'transform 0.5s' : undefined,
-				transform: calcTransformX($.get(currentIndex), $.get(childCount), $.get(movedX)),
 				userSelect: 'none'
+			});
+		}
+	);
+
+	$.legacy_pre_effect(
+		() => (
+			$.get(baseContainerStyle),
+			$.get(transformX)
+		),
+		() => {
+			$.set(containerStyle, objToStyle({
+				...$.get(baseContainerStyle),
+				transform: $.get(transformX)
 			}));
 		}
 	);
@@ -5662,16 +5703,18 @@ 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);
 
-	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);
 
@@ -5702,15 +5745,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));
 		},
 		[
 			() => [
@@ -5721,8 +5763,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-29088092.6390e271",
+  "version": "1.1.268-29089896.0dceea5e",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",