@plaidev/karte-action-sdk 1.1.268-29089896.0dceea5e → 1.1.268-29090020.0f31d4b5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17452,17 +17452,17 @@ const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
17452
17452
  /* src/components-flex/slider/Slider.svelte generated by Svelte v3.53.1 */
17453
17453
 
17454
17454
  function add_css$f(target) {
17455
- append_styles(target, "svelte-1rafop1", ".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}");
17455
+ append_styles(target, "svelte-wwv1o", ".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}");
17456
17456
  }
17457
17457
 
17458
17458
  function get_each_context$1(ctx, list, i) {
17459
17459
  const child_ctx = ctx.slice();
17460
- child_ctx[32] = list[i];
17461
- child_ctx[34] = i;
17460
+ child_ctx[36] = list[i];
17461
+ child_ctx[38] = i;
17462
17462
  return child_ctx;
17463
17463
  }
17464
17464
 
17465
- // (183:4) {#each indicators ?? [] as indicator, i}
17465
+ // (192:4) {#each indicators ?? [] as indicator, i}
17466
17466
  function create_each_block$1(ctx) {
17467
17467
  let button;
17468
17468
  let i_1;
@@ -17472,7 +17472,7 @@ function create_each_block$1(ctx) {
17472
17472
  let dispose;
17473
17473
 
17474
17474
  function click_handler() {
17475
- return /*click_handler*/ ctx[20](/*i*/ ctx[34]);
17475
+ return /*click_handler*/ ctx[22](/*i*/ ctx[38]);
17476
17476
  }
17477
17477
 
17478
17478
  return {
@@ -17493,9 +17493,9 @@ function create_each_block$1(ctx) {
17493
17493
  },
17494
17494
  h() {
17495
17495
  attr(i_1, "style", i_1_style_value = objToStyle({
17496
- .../*indicatorItemStyle*/ ctx[3],
17496
+ .../*indicatorItemStyle*/ ctx[4],
17497
17497
  ...{
17498
- background: /*indicator*/ ctx[32].isActive ? '#555555' : '#AAAAAA'
17498
+ background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
17499
17499
  }
17500
17500
  }));
17501
17501
 
@@ -17518,10 +17518,10 @@ function create_each_block$1(ctx) {
17518
17518
  p(new_ctx, dirty) {
17519
17519
  ctx = new_ctx;
17520
17520
 
17521
- if (dirty[0] & /*indicatorItemStyle, indicators*/ 72 && i_1_style_value !== (i_1_style_value = objToStyle({
17522
- .../*indicatorItemStyle*/ ctx[3],
17521
+ if (dirty[0] & /*indicatorItemStyle, indicators*/ 144 && i_1_style_value !== (i_1_style_value = objToStyle({
17522
+ .../*indicatorItemStyle*/ ctx[4],
17523
17523
  ...{
17524
- background: /*indicator*/ ctx[32].isActive ? '#555555' : '#AAAAAA'
17524
+ background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
17525
17525
  }
17526
17526
  }))) {
17527
17527
  attr(i_1, "style", i_1_style_value);
@@ -17545,9 +17545,9 @@ function create_fragment$j(ctx) {
17545
17545
  let current;
17546
17546
  let mounted;
17547
17547
  let dispose;
17548
- const default_slot_template = /*#slots*/ ctx[18].default;
17549
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[17], null);
17550
- let each_value = /*indicators*/ ctx[6] ?? [];
17548
+ const default_slot_template = /*#slots*/ ctx[19].default;
17549
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[18], null);
17550
+ let each_value = /*indicators*/ ctx[7] ?? [];
17551
17551
  let each_blocks = [];
17552
17552
 
17553
17553
  for (let i = 0; i < each_value.length; i += 1) {
@@ -17592,12 +17592,12 @@ function create_fragment$j(ctx) {
17592
17592
  this.h();
17593
17593
  },
17594
17594
  h() {
17595
- attr(ul, "class", "slider-list svelte-1rafop1");
17596
- attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[5], /*overrideStyle*/ ctx[1]].join(' '));
17597
- attr(div0, "class", "slider-container svelte-1rafop1");
17598
- attr(div1, "style", /*indicatorListStyle*/ ctx[4]);
17595
+ attr(ul, "class", "slider-list svelte-wwv1o");
17596
+ attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '));
17597
+ attr(div0, "class", "slider-container svelte-wwv1o");
17598
+ attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
17599
17599
  attr(div2, "data-layer-id", /*layerId*/ ctx[0]);
17600
- attr(div2, "class", "slider svelte-1rafop1");
17600
+ attr(div2, "class", "slider svelte-wwv1o");
17601
17601
  },
17602
17602
  m(target, anchor) {
17603
17603
  insert_hydration(target, div2, anchor);
@@ -17608,7 +17608,8 @@ function create_fragment$j(ctx) {
17608
17608
  default_slot.m(ul, null);
17609
17609
  }
17610
17610
 
17611
- /*ul_binding*/ ctx[19](ul);
17611
+ /*ul_binding*/ ctx[20](ul);
17612
+ /*div0_binding*/ ctx[21](div0);
17612
17613
  append_hydration(div2, t);
17613
17614
  append_hydration(div2, div1);
17614
17615
 
@@ -17620,8 +17621,8 @@ function create_fragment$j(ctx) {
17620
17621
 
17621
17622
  if (!mounted) {
17622
17623
  dispose = [
17623
- listen(div0, "mousedown", /*handleMousedown*/ ctx[9]),
17624
- listen(div0, "touchstart", /*handleTouchstart*/ ctx[8])
17624
+ listen(div0, "mousedown", /*handleMousedown*/ ctx[10]),
17625
+ listen(div0, "touchstart", /*handleTouchstart*/ ctx[9])
17625
17626
  ];
17626
17627
 
17627
17628
  mounted = true;
@@ -17629,26 +17630,26 @@ function create_fragment$j(ctx) {
17629
17630
  },
17630
17631
  p(ctx, dirty) {
17631
17632
  if (default_slot) {
17632
- if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 131072)) {
17633
+ if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 262144)) {
17633
17634
  update_slot_base(
17634
17635
  default_slot,
17635
17636
  default_slot_template,
17636
17637
  ctx,
17637
- /*$$scope*/ ctx[17],
17638
+ /*$$scope*/ ctx[18],
17638
17639
  !current
17639
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[17])
17640
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[17], dirty, null),
17640
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[18])
17641
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[18], dirty, null),
17641
17642
  null
17642
17643
  );
17643
17644
  }
17644
17645
  }
17645
17646
 
17646
- if (!current || dirty[0] & /*containerStyle, overrideStyle*/ 34 && ul_style_value !== (ul_style_value = [/*containerStyle*/ ctx[5], /*overrideStyle*/ ctx[1]].join(' '))) {
17647
+ if (!current || dirty[0] & /*containerStyle, overrideStyle*/ 66 && ul_style_value !== (ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '))) {
17647
17648
  attr(ul, "style", ul_style_value);
17648
17649
  }
17649
17650
 
17650
- if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/ 200) {
17651
- each_value = /*indicators*/ ctx[6] ?? [];
17651
+ if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/ 400) {
17652
+ each_value = /*indicators*/ ctx[7] ?? [];
17652
17653
  let i;
17653
17654
 
17654
17655
  for (i = 0; i < each_value.length; i += 1) {
@@ -17670,8 +17671,8 @@ function create_fragment$j(ctx) {
17670
17671
  each_blocks.length = each_value.length;
17671
17672
  }
17672
17673
 
17673
- if (!current || dirty[0] & /*indicatorListStyle*/ 16) {
17674
- attr(div1, "style", /*indicatorListStyle*/ ctx[4]);
17674
+ if (!current || dirty[0] & /*indicatorListStyle*/ 32) {
17675
+ attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
17675
17676
  }
17676
17677
 
17677
17678
  if (!current || dirty[0] & /*layerId*/ 1) {
@@ -17690,7 +17691,8 @@ function create_fragment$j(ctx) {
17690
17691
  d(detaching) {
17691
17692
  if (detaching) detach(div2);
17692
17693
  if (default_slot) default_slot.d(detaching);
17693
- /*ul_binding*/ ctx[19](null);
17694
+ /*ul_binding*/ ctx[20](null);
17695
+ /*div0_binding*/ ctx[21](null);
17694
17696
  destroy_each(each_blocks, detaching);
17695
17697
  mounted = false;
17696
17698
  run_all(dispose);
@@ -17698,6 +17700,8 @@ function create_fragment$j(ctx) {
17698
17700
  };
17699
17701
  }
17700
17702
 
17703
+ const THROTTLE = 16;
17704
+
17701
17705
  function instance$j($$self, $$props, $$invalidate) {
17702
17706
  let indicators;
17703
17707
  let itemWidthPercentage;
@@ -17710,6 +17714,7 @@ function instance$j($$self, $$props, $$invalidate) {
17710
17714
  let { props } = $$props;
17711
17715
  let { overrideStyle } = $$props;
17712
17716
  useInjectCustomizeCss(props);
17717
+ let containerElement;
17713
17718
  let slotElement;
17714
17719
  let currentIndex = 0;
17715
17720
  let isDragging = false;
@@ -17717,7 +17722,7 @@ function instance$j($$self, $$props, $$invalidate) {
17717
17722
  let movedX = null;
17718
17723
  let childCount = 0;
17719
17724
  let transformX;
17720
- console.log('transformX', transformX);
17725
+ let lastFrame = 0;
17721
17726
 
17722
17727
  const computeTransformX = (index, itemCount, movedX, itemWidthPercentage, gap) => {
17723
17728
  if (index === 0) return;
@@ -17733,54 +17738,64 @@ function instance$j($$self, $$props, $$invalidate) {
17733
17738
  }
17734
17739
 
17735
17740
  const moved = movedX ? ` + ${-movedX}px` : '';
17736
- return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
17741
+ return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
17737
17742
  };
17738
17743
 
17739
17744
  const handleClickIndicator = index => {
17740
- $$invalidate(11, currentIndex = index);
17745
+ $$invalidate(12, currentIndex = index);
17741
17746
  };
17742
17747
 
17743
17748
  const setChildCount = () => {
17744
17749
  const count = slotElement?.children?.length ?? 0;
17745
17750
 
17746
17751
  if (count !== childCount) {
17747
- $$invalidate(13, childCount = slotElement?.children?.length ?? 0);
17752
+ $$invalidate(14, childCount = slotElement?.children?.length ?? 0);
17748
17753
  }
17749
17754
  };
17750
17755
 
17751
17756
  const toNext = () => {
17752
- console.log('toNext');
17753
-
17754
17757
  if (currentIndex < childCount - 1) {
17755
- $$invalidate(11, currentIndex = currentIndex + 1);
17758
+ $$invalidate(12, currentIndex = currentIndex + 1);
17756
17759
  } else if (props.loop) {
17757
- $$invalidate(11, currentIndex = 0);
17760
+ $$invalidate(12, currentIndex = 0);
17758
17761
  }
17759
17762
  };
17760
17763
 
17761
17764
  const toPrev = () => {
17762
17765
  if (currentIndex > 0) {
17763
- $$invalidate(11, currentIndex = currentIndex - 1);
17766
+ $$invalidate(12, currentIndex = currentIndex - 1);
17764
17767
  } else if (props.loop) {
17765
- $$invalidate(11, currentIndex = childCount - 1);
17768
+ $$invalidate(12, currentIndex = childCount - 1);
17766
17769
  }
17767
17770
  };
17768
17771
 
17769
17772
  const handleClick = e => {
17770
- if (isDragging) {
17773
+ const isParentContainer = el => {
17774
+ if (!el) return false;
17775
+ return el === containerElement || isParentContainer(el.parentElement);
17776
+ };
17777
+
17778
+ if (isParentContainer(e.target) && isDragging) {
17771
17779
  e.preventDefault();
17772
17780
  e.stopPropagation();
17773
17781
  }
17774
17782
  };
17775
17783
 
17776
- const handleTouchmove = e => {
17777
- $$invalidate(12, movedX = startX - e.touches[0].clientX);
17784
+ const move = moved => {
17785
+ $$invalidate(13, movedX = moved);
17778
17786
 
17779
- if (movedX > 10 || movedX < -10) {
17787
+ if ((moved > 10 || moved < -10) && !isDragging) {
17780
17788
  isDragging = true;
17781
17789
  }
17782
17790
  };
17783
17791
 
17792
+ const handleTouchmove = e => {
17793
+ const now = performance.now();
17794
+ if (now - lastFrame < THROTTLE) return;
17795
+ move(startX - e.touches[0].clientX);
17796
+ lastFrame = now;
17797
+ };
17798
+
17784
17799
  const handleTouchend = () => {
17785
17800
  if (movedX >= 32) {
17786
17801
  toNext();
@@ -17788,7 +17803,7 @@ function instance$j($$self, $$props, $$invalidate) {
17788
17803
  toPrev();
17789
17804
  }
17790
17805
 
17791
- $$invalidate(12, movedX = null);
17806
+ $$invalidate(13, movedX = null);
17792
17807
  document.removeEventListener('touchmove', handleTouchmove);
17793
17808
  document.removeEventListener('touchend', handleTouchend);
17794
17809
  document.removeEventListener('click', handleClick);
@@ -17798,16 +17813,12 @@ function instance$j($$self, $$props, $$invalidate) {
17798
17813
  startX = e.touches[0].clientX;
17799
17814
  isDragging = false;
17800
17815
  document.addEventListener('touchmove', handleTouchmove, { passive: true });
17801
- document.addEventListener('touchend', handleTouchend, { passive: true });
17802
- document.addEventListener('click', handleClick, { capture: true });
17816
+ document.addEventListener('touchend', handleTouchend, { passive: false });
17817
+ document.addEventListener('click', handleClick);
17803
17818
  };
17804
17819
 
17805
17820
  const handleMousemove = e => {
17806
- $$invalidate(12, movedX = startX - e.clientX);
17807
-
17808
- if (movedX > 10 || movedX < -10) {
17809
- isDragging = true;
17810
- }
17821
+ move(startX - e.clientX);
17811
17822
  };
17812
17823
 
17813
17824
  const handleMouseup = e => {
@@ -17817,10 +17828,9 @@ function instance$j($$self, $$props, $$invalidate) {
17817
17828
  toPrev();
17818
17829
  }
17819
17830
 
17820
- $$invalidate(12, movedX = null);
17831
+ $$invalidate(13, movedX = null);
17821
17832
 
17822
17833
  if (isDragging) {
17823
- // e.preventDefault()
17824
17834
  e.stopPropagation();
17825
17835
  }
17826
17836
 
@@ -17851,7 +17861,6 @@ function instance$j($$self, $$props, $$invalidate) {
17851
17861
  }
17852
17862
 
17853
17863
  return () => {
17854
- // clearInterval(childCountTimer)
17855
17864
  if (autoSlideTimer) clearInterval(autoSlideTimer);
17856
17865
  };
17857
17866
  });
@@ -17863,36 +17872,43 @@ function instance$j($$self, $$props, $$invalidate) {
17863
17872
  });
17864
17873
  }
17865
17874
 
17875
+ function div0_binding($$value) {
17876
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
17877
+ containerElement = $$value;
17878
+ $$invalidate(3, containerElement);
17879
+ });
17880
+ }
17881
+
17866
17882
  const click_handler = i => handleClickIndicator(i);
17867
17883
 
17868
17884
  $$self.$$set = $$props => {
17869
17885
  if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
17870
- if ('props' in $$props) $$invalidate(10, props = $$props.props);
17886
+ if ('props' in $$props) $$invalidate(11, props = $$props.props);
17871
17887
  if ('overrideStyle' in $$props) $$invalidate(1, overrideStyle = $$props.overrideStyle);
17872
- if ('$$scope' in $$props) $$invalidate(17, $$scope = $$props.$$scope);
17888
+ if ('$$scope' in $$props) $$invalidate(18, $$scope = $$props.$$scope);
17873
17889
  };
17874
17890
 
17875
17891
  $$self.$$.update = () => {
17876
17892
  if ($$self.$$.dirty[0] & /*slotElement*/ 4) {
17877
17893
  if (slotElement) {
17878
- $$invalidate(13, childCount = slotElement.children.length);
17894
+ $$invalidate(14, childCount = slotElement.children.length);
17879
17895
  }
17880
17896
  }
17881
17897
 
17882
- if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 10240) {
17883
- $$invalidate(6, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
17898
+ if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 20480) {
17899
+ $$invalidate(7, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
17884
17900
  }
17885
17901
 
17886
- if ($$self.$$.dirty[0] & /*props*/ 1024) {
17887
- $$invalidate(16, itemWidthPercentage = props.itemWidthPercentage ?? 100);
17902
+ if ($$self.$$.dirty[0] & /*props*/ 2048) {
17903
+ $$invalidate(17, itemWidthPercentage = props.itemWidthPercentage ?? 100);
17888
17904
  }
17889
17905
 
17890
- if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 80896) {
17891
- $$invalidate(14, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
17906
+ if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 161792) {
17907
+ $$invalidate(15, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
17892
17908
  }
17893
17909
 
17894
- if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 70656) {
17895
- $$invalidate(15, baseContainerStyle = {
17910
+ if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 141312) {
17911
+ $$invalidate(16, baseContainerStyle = {
17896
17912
  display: 'grid',
17897
17913
  // marginInline: `-${props.gap}px`,
17898
17914
  gap: `${props.gap}px`,
@@ -17905,34 +17921,36 @@ function instance$j($$self, $$props, $$invalidate) {
17905
17921
  });
17906
17922
  }
17907
17923
 
17908
- if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 49152) {
17909
- $$invalidate(5, containerStyle = objToStyle({
17924
+ if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 98304) {
17925
+ $$invalidate(6, containerStyle = objToStyle({
17910
17926
  ...baseContainerStyle,
17911
17927
  transform: transformX
17912
17928
  }));
17913
17929
  }
17914
17930
  };
17915
17931
 
17916
- $$invalidate(4, indicatorListStyle = objToStyle({
17932
+ $$invalidate(5, indicatorListStyle = objToStyle({
17917
17933
  display: 'flex',
17918
17934
  justifyContent: 'center',
17919
17935
  gap: '4px',
17920
17936
  marginTop: '12px'
17921
17937
  }));
17922
17938
 
17923
- $$invalidate(3, indicatorItemStyle = {
17939
+ $$invalidate(4, indicatorItemStyle = {
17924
17940
  width: '8px',
17925
17941
  height: '8px',
17926
17942
  borderRadius: '100%',
17927
17943
  display: 'block',
17928
17944
  background: '#AAAAAA',
17929
- border: 0
17945
+ border: 0,
17946
+ cursor: 'pointer'
17930
17947
  });
17931
17948
 
17932
17949
  return [
17933
17950
  layerId,
17934
17951
  overrideStyle,
17935
17952
  slotElement,
17953
+ containerElement,
17936
17954
  indicatorItemStyle,
17937
17955
  indicatorListStyle,
17938
17956
  containerStyle,
@@ -17950,6 +17968,7 @@ function instance$j($$self, $$props, $$invalidate) {
17950
17968
  $$scope,
17951
17969
  slots,
17952
17970
  ul_binding,
17971
+ div0_binding,
17953
17972
  click_handler
17954
17973
  ];
17955
17974
  }
@@ -17957,7 +17976,7 @@ function instance$j($$self, $$props, $$invalidate) {
17957
17976
  class Slider extends SvelteComponent {
17958
17977
  constructor(options) {
17959
17978
  super();
17960
- init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props: 10, overrideStyle: 1 }, add_css$f, [-1, -1]);
17979
+ init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props: 11, overrideStyle: 1 }, add_css$f, [-1, -1]);
17961
17980
  }
17962
17981
  }
17963
17982
 
package/dist/index.es.js CHANGED
@@ -16145,17 +16145,17 @@ const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
16145
16145
  /* src/components-flex/slider/Slider.svelte generated by Svelte v3.53.1 */
16146
16146
 
16147
16147
  function add_css$f(target) {
16148
- append_styles(target, "svelte-1rafop1", ".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}");
16148
+ append_styles(target, "svelte-wwv1o", ".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}");
16149
16149
  }
16150
16150
 
16151
16151
  function get_each_context$1(ctx, list, i) {
16152
16152
  const child_ctx = ctx.slice();
16153
- child_ctx[32] = list[i];
16154
- child_ctx[34] = i;
16153
+ child_ctx[36] = list[i];
16154
+ child_ctx[38] = i;
16155
16155
  return child_ctx;
16156
16156
  }
16157
16157
 
16158
- // (183:4) {#each indicators ?? [] as indicator, i}
16158
+ // (192:4) {#each indicators ?? [] as indicator, i}
16159
16159
  function create_each_block$1(ctx) {
16160
16160
  let button;
16161
16161
  let i_1;
@@ -16165,7 +16165,7 @@ function create_each_block$1(ctx) {
16165
16165
  let dispose;
16166
16166
 
16167
16167
  function click_handler() {
16168
- return /*click_handler*/ ctx[20](/*i*/ ctx[34]);
16168
+ return /*click_handler*/ ctx[22](/*i*/ ctx[38]);
16169
16169
  }
16170
16170
 
16171
16171
  return {
@@ -16175,9 +16175,9 @@ function create_each_block$1(ctx) {
16175
16175
  t = space();
16176
16176
 
16177
16177
  attr(i_1, "style", i_1_style_value = objToStyle({
16178
- .../*indicatorItemStyle*/ ctx[3],
16178
+ .../*indicatorItemStyle*/ ctx[4],
16179
16179
  ...{
16180
- background: /*indicator*/ ctx[32].isActive ? '#555555' : '#AAAAAA'
16180
+ background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
16181
16181
  }
16182
16182
  }));
16183
16183
 
@@ -16200,10 +16200,10 @@ function create_each_block$1(ctx) {
16200
16200
  p(new_ctx, dirty) {
16201
16201
  ctx = new_ctx;
16202
16202
 
16203
- if (dirty[0] & /*indicatorItemStyle, indicators*/ 72 && i_1_style_value !== (i_1_style_value = objToStyle({
16204
- .../*indicatorItemStyle*/ ctx[3],
16203
+ if (dirty[0] & /*indicatorItemStyle, indicators*/ 144 && i_1_style_value !== (i_1_style_value = objToStyle({
16204
+ .../*indicatorItemStyle*/ ctx[4],
16205
16205
  ...{
16206
- background: /*indicator*/ ctx[32].isActive ? '#555555' : '#AAAAAA'
16206
+ background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
16207
16207
  }
16208
16208
  }))) {
16209
16209
  attr(i_1, "style", i_1_style_value);
@@ -16227,9 +16227,9 @@ function create_fragment$j(ctx) {
16227
16227
  let current;
16228
16228
  let mounted;
16229
16229
  let dispose;
16230
- const default_slot_template = /*#slots*/ ctx[18].default;
16231
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[17], null);
16232
- let each_value = /*indicators*/ ctx[6] ?? [];
16230
+ const default_slot_template = /*#slots*/ ctx[19].default;
16231
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[18], null);
16232
+ let each_value = /*indicators*/ ctx[7] ?? [];
16233
16233
  let each_blocks = [];
16234
16234
 
16235
16235
  for (let i = 0; i < each_value.length; i += 1) {
@@ -16249,12 +16249,12 @@ function create_fragment$j(ctx) {
16249
16249
  each_blocks[i].c();
16250
16250
  }
16251
16251
 
16252
- attr(ul, "class", "slider-list svelte-1rafop1");
16253
- attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[5], /*overrideStyle*/ ctx[1]].join(' '));
16254
- attr(div0, "class", "slider-container svelte-1rafop1");
16255
- attr(div1, "style", /*indicatorListStyle*/ ctx[4]);
16252
+ attr(ul, "class", "slider-list svelte-wwv1o");
16253
+ attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '));
16254
+ attr(div0, "class", "slider-container svelte-wwv1o");
16255
+ attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
16256
16256
  attr(div2, "data-layer-id", /*layerId*/ ctx[0]);
16257
- attr(div2, "class", "slider svelte-1rafop1");
16257
+ attr(div2, "class", "slider svelte-wwv1o");
16258
16258
  },
16259
16259
  m(target, anchor) {
16260
16260
  insert(target, div2, anchor);
@@ -16265,7 +16265,8 @@ function create_fragment$j(ctx) {
16265
16265
  default_slot.m(ul, null);
16266
16266
  }
16267
16267
 
16268
- /*ul_binding*/ ctx[19](ul);
16268
+ /*ul_binding*/ ctx[20](ul);
16269
+ /*div0_binding*/ ctx[21](div0);
16269
16270
  append(div2, t);
16270
16271
  append(div2, div1);
16271
16272
 
@@ -16277,8 +16278,8 @@ function create_fragment$j(ctx) {
16277
16278
 
16278
16279
  if (!mounted) {
16279
16280
  dispose = [
16280
- listen(div0, "mousedown", /*handleMousedown*/ ctx[9]),
16281
- listen(div0, "touchstart", /*handleTouchstart*/ ctx[8])
16281
+ listen(div0, "mousedown", /*handleMousedown*/ ctx[10]),
16282
+ listen(div0, "touchstart", /*handleTouchstart*/ ctx[9])
16282
16283
  ];
16283
16284
 
16284
16285
  mounted = true;
@@ -16286,26 +16287,26 @@ function create_fragment$j(ctx) {
16286
16287
  },
16287
16288
  p(ctx, dirty) {
16288
16289
  if (default_slot) {
16289
- if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 131072)) {
16290
+ if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 262144)) {
16290
16291
  update_slot_base(
16291
16292
  default_slot,
16292
16293
  default_slot_template,
16293
16294
  ctx,
16294
- /*$$scope*/ ctx[17],
16295
+ /*$$scope*/ ctx[18],
16295
16296
  !current
16296
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[17])
16297
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[17], dirty, null),
16297
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[18])
16298
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[18], dirty, null),
16298
16299
  null
16299
16300
  );
16300
16301
  }
16301
16302
  }
16302
16303
 
16303
- if (!current || dirty[0] & /*containerStyle, overrideStyle*/ 34 && ul_style_value !== (ul_style_value = [/*containerStyle*/ ctx[5], /*overrideStyle*/ ctx[1]].join(' '))) {
16304
+ if (!current || dirty[0] & /*containerStyle, overrideStyle*/ 66 && ul_style_value !== (ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '))) {
16304
16305
  attr(ul, "style", ul_style_value);
16305
16306
  }
16306
16307
 
16307
- if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/ 200) {
16308
- each_value = /*indicators*/ ctx[6] ?? [];
16308
+ if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/ 400) {
16309
+ each_value = /*indicators*/ ctx[7] ?? [];
16309
16310
  let i;
16310
16311
 
16311
16312
  for (i = 0; i < each_value.length; i += 1) {
@@ -16327,8 +16328,8 @@ function create_fragment$j(ctx) {
16327
16328
  each_blocks.length = each_value.length;
16328
16329
  }
16329
16330
 
16330
- if (!current || dirty[0] & /*indicatorListStyle*/ 16) {
16331
- attr(div1, "style", /*indicatorListStyle*/ ctx[4]);
16331
+ if (!current || dirty[0] & /*indicatorListStyle*/ 32) {
16332
+ attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
16332
16333
  }
16333
16334
 
16334
16335
  if (!current || dirty[0] & /*layerId*/ 1) {
@@ -16347,7 +16348,8 @@ function create_fragment$j(ctx) {
16347
16348
  d(detaching) {
16348
16349
  if (detaching) detach(div2);
16349
16350
  if (default_slot) default_slot.d(detaching);
16350
- /*ul_binding*/ ctx[19](null);
16351
+ /*ul_binding*/ ctx[20](null);
16352
+ /*div0_binding*/ ctx[21](null);
16351
16353
  destroy_each(each_blocks, detaching);
16352
16354
  mounted = false;
16353
16355
  run_all(dispose);
@@ -16355,6 +16357,8 @@ function create_fragment$j(ctx) {
16355
16357
  };
16356
16358
  }
16357
16359
 
16360
+ const THROTTLE = 16;
16361
+
16358
16362
  function instance$j($$self, $$props, $$invalidate) {
16359
16363
  let indicators;
16360
16364
  let itemWidthPercentage;
@@ -16367,6 +16371,7 @@ function instance$j($$self, $$props, $$invalidate) {
16367
16371
  let { props } = $$props;
16368
16372
  let { overrideStyle } = $$props;
16369
16373
  useInjectCustomizeCss(props);
16374
+ let containerElement;
16370
16375
  let slotElement;
16371
16376
  let currentIndex = 0;
16372
16377
  let isDragging = false;
@@ -16374,7 +16379,7 @@ function instance$j($$self, $$props, $$invalidate) {
16374
16379
  let movedX = null;
16375
16380
  let childCount = 0;
16376
16381
  let transformX;
16377
- console.log('transformX', transformX);
16382
+ let lastFrame = 0;
16378
16383
 
16379
16384
  const computeTransformX = (index, itemCount, movedX, itemWidthPercentage, gap) => {
16380
16385
  if (index === 0) return;
@@ -16390,54 +16395,64 @@ function instance$j($$self, $$props, $$invalidate) {
16390
16395
  }
16391
16396
 
16392
16397
  const moved = movedX ? ` + ${-movedX}px` : '';
16393
- return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
16398
+ return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
16394
16399
  };
16395
16400
 
16396
16401
  const handleClickIndicator = index => {
16397
- $$invalidate(11, currentIndex = index);
16402
+ $$invalidate(12, currentIndex = index);
16398
16403
  };
16399
16404
 
16400
16405
  const setChildCount = () => {
16401
16406
  const count = slotElement?.children?.length ?? 0;
16402
16407
 
16403
16408
  if (count !== childCount) {
16404
- $$invalidate(13, childCount = slotElement?.children?.length ?? 0);
16409
+ $$invalidate(14, childCount = slotElement?.children?.length ?? 0);
16405
16410
  }
16406
16411
  };
16407
16412
 
16408
16413
  const toNext = () => {
16409
- console.log('toNext');
16410
-
16411
16414
  if (currentIndex < childCount - 1) {
16412
- $$invalidate(11, currentIndex = currentIndex + 1);
16415
+ $$invalidate(12, currentIndex = currentIndex + 1);
16413
16416
  } else if (props.loop) {
16414
- $$invalidate(11, currentIndex = 0);
16417
+ $$invalidate(12, currentIndex = 0);
16415
16418
  }
16416
16419
  };
16417
16420
 
16418
16421
  const toPrev = () => {
16419
16422
  if (currentIndex > 0) {
16420
- $$invalidate(11, currentIndex = currentIndex - 1);
16423
+ $$invalidate(12, currentIndex = currentIndex - 1);
16421
16424
  } else if (props.loop) {
16422
- $$invalidate(11, currentIndex = childCount - 1);
16425
+ $$invalidate(12, currentIndex = childCount - 1);
16423
16426
  }
16424
16427
  };
16425
16428
 
16426
16429
  const handleClick = e => {
16427
- if (isDragging) {
16430
+ const isParentContainer = el => {
16431
+ if (!el) return false;
16432
+ return el === containerElement || isParentContainer(el.parentElement);
16433
+ };
16434
+
16435
+ if (isParentContainer(e.target) && isDragging) {
16428
16436
  e.preventDefault();
16429
16437
  e.stopPropagation();
16430
16438
  }
16431
16439
  };
16432
16440
 
16433
- const handleTouchmove = e => {
16434
- $$invalidate(12, movedX = startX - e.touches[0].clientX);
16441
+ const move = moved => {
16442
+ $$invalidate(13, movedX = moved);
16435
16443
 
16436
- if (movedX > 10 || movedX < -10) {
16444
+ if ((moved > 10 || moved < -10) && !isDragging) {
16437
16445
  isDragging = true;
16438
16446
  }
16439
16447
  };
16440
16448
 
16449
+ const handleTouchmove = e => {
16450
+ const now = performance.now();
16451
+ if (now - lastFrame < THROTTLE) return;
16452
+ move(startX - e.touches[0].clientX);
16453
+ lastFrame = now;
16454
+ };
16455
+
16441
16456
  const handleTouchend = () => {
16442
16457
  if (movedX >= 32) {
16443
16458
  toNext();
@@ -16445,7 +16460,7 @@ function instance$j($$self, $$props, $$invalidate) {
16445
16460
  toPrev();
16446
16461
  }
16447
16462
 
16448
- $$invalidate(12, movedX = null);
16463
+ $$invalidate(13, movedX = null);
16449
16464
  document.removeEventListener('touchmove', handleTouchmove);
16450
16465
  document.removeEventListener('touchend', handleTouchend);
16451
16466
  document.removeEventListener('click', handleClick);
@@ -16455,16 +16470,12 @@ function instance$j($$self, $$props, $$invalidate) {
16455
16470
  startX = e.touches[0].clientX;
16456
16471
  isDragging = false;
16457
16472
  document.addEventListener('touchmove', handleTouchmove, { passive: true });
16458
- document.addEventListener('touchend', handleTouchend, { passive: true });
16459
- document.addEventListener('click', handleClick, { capture: true });
16473
+ document.addEventListener('touchend', handleTouchend, { passive: false });
16474
+ document.addEventListener('click', handleClick);
16460
16475
  };
16461
16476
 
16462
16477
  const handleMousemove = e => {
16463
- $$invalidate(12, movedX = startX - e.clientX);
16464
-
16465
- if (movedX > 10 || movedX < -10) {
16466
- isDragging = true;
16467
- }
16478
+ move(startX - e.clientX);
16468
16479
  };
16469
16480
 
16470
16481
  const handleMouseup = e => {
@@ -16474,10 +16485,9 @@ function instance$j($$self, $$props, $$invalidate) {
16474
16485
  toPrev();
16475
16486
  }
16476
16487
 
16477
- $$invalidate(12, movedX = null);
16488
+ $$invalidate(13, movedX = null);
16478
16489
 
16479
16490
  if (isDragging) {
16480
- // e.preventDefault()
16481
16491
  e.stopPropagation();
16482
16492
  }
16483
16493
 
@@ -16508,7 +16518,6 @@ function instance$j($$self, $$props, $$invalidate) {
16508
16518
  }
16509
16519
 
16510
16520
  return () => {
16511
- // clearInterval(childCountTimer)
16512
16521
  if (autoSlideTimer) clearInterval(autoSlideTimer);
16513
16522
  };
16514
16523
  });
@@ -16520,36 +16529,43 @@ function instance$j($$self, $$props, $$invalidate) {
16520
16529
  });
16521
16530
  }
16522
16531
 
16532
+ function div0_binding($$value) {
16533
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
16534
+ containerElement = $$value;
16535
+ $$invalidate(3, containerElement);
16536
+ });
16537
+ }
16538
+
16523
16539
  const click_handler = i => handleClickIndicator(i);
16524
16540
 
16525
16541
  $$self.$$set = $$props => {
16526
16542
  if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
16527
- if ('props' in $$props) $$invalidate(10, props = $$props.props);
16543
+ if ('props' in $$props) $$invalidate(11, props = $$props.props);
16528
16544
  if ('overrideStyle' in $$props) $$invalidate(1, overrideStyle = $$props.overrideStyle);
16529
- if ('$$scope' in $$props) $$invalidate(17, $$scope = $$props.$$scope);
16545
+ if ('$$scope' in $$props) $$invalidate(18, $$scope = $$props.$$scope);
16530
16546
  };
16531
16547
 
16532
16548
  $$self.$$.update = () => {
16533
16549
  if ($$self.$$.dirty[0] & /*slotElement*/ 4) {
16534
16550
  if (slotElement) {
16535
- $$invalidate(13, childCount = slotElement.children.length);
16551
+ $$invalidate(14, childCount = slotElement.children.length);
16536
16552
  }
16537
16553
  }
16538
16554
 
16539
- if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 10240) {
16540
- $$invalidate(6, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
16555
+ if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 20480) {
16556
+ $$invalidate(7, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
16541
16557
  }
16542
16558
 
16543
- if ($$self.$$.dirty[0] & /*props*/ 1024) {
16544
- $$invalidate(16, itemWidthPercentage = props.itemWidthPercentage ?? 100);
16559
+ if ($$self.$$.dirty[0] & /*props*/ 2048) {
16560
+ $$invalidate(17, itemWidthPercentage = props.itemWidthPercentage ?? 100);
16545
16561
  }
16546
16562
 
16547
- if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 80896) {
16548
- $$invalidate(14, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
16563
+ if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 161792) {
16564
+ $$invalidate(15, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
16549
16565
  }
16550
16566
 
16551
- if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 70656) {
16552
- $$invalidate(15, baseContainerStyle = {
16567
+ if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 141312) {
16568
+ $$invalidate(16, baseContainerStyle = {
16553
16569
  display: 'grid',
16554
16570
  // marginInline: `-${props.gap}px`,
16555
16571
  gap: `${props.gap}px`,
@@ -16562,34 +16578,36 @@ function instance$j($$self, $$props, $$invalidate) {
16562
16578
  });
16563
16579
  }
16564
16580
 
16565
- if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 49152) {
16566
- $$invalidate(5, containerStyle = objToStyle({
16581
+ if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 98304) {
16582
+ $$invalidate(6, containerStyle = objToStyle({
16567
16583
  ...baseContainerStyle,
16568
16584
  transform: transformX
16569
16585
  }));
16570
16586
  }
16571
16587
  };
16572
16588
 
16573
- $$invalidate(4, indicatorListStyle = objToStyle({
16589
+ $$invalidate(5, indicatorListStyle = objToStyle({
16574
16590
  display: 'flex',
16575
16591
  justifyContent: 'center',
16576
16592
  gap: '4px',
16577
16593
  marginTop: '12px'
16578
16594
  }));
16579
16595
 
16580
- $$invalidate(3, indicatorItemStyle = {
16596
+ $$invalidate(4, indicatorItemStyle = {
16581
16597
  width: '8px',
16582
16598
  height: '8px',
16583
16599
  borderRadius: '100%',
16584
16600
  display: 'block',
16585
16601
  background: '#AAAAAA',
16586
- border: 0
16602
+ border: 0,
16603
+ cursor: 'pointer'
16587
16604
  });
16588
16605
 
16589
16606
  return [
16590
16607
  layerId,
16591
16608
  overrideStyle,
16592
16609
  slotElement,
16610
+ containerElement,
16593
16611
  indicatorItemStyle,
16594
16612
  indicatorListStyle,
16595
16613
  containerStyle,
@@ -16607,6 +16625,7 @@ function instance$j($$self, $$props, $$invalidate) {
16607
16625
  $$scope,
16608
16626
  slots,
16609
16627
  ul_binding,
16628
+ div0_binding,
16610
16629
  click_handler
16611
16630
  ];
16612
16631
  }
@@ -16614,7 +16633,7 @@ function instance$j($$self, $$props, $$invalidate) {
16614
16633
  class Slider extends SvelteComponent {
16615
16634
  constructor(options) {
16616
16635
  super();
16617
- init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props: 10, overrideStyle: 1 }, add_css$f, [-1, -1]);
16636
+ init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props: 11, overrideStyle: 1 }, add_css$f, [-1, -1]);
16618
16637
  }
16619
16638
  }
16620
16639
 
@@ -5464,11 +5464,11 @@ const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
5464
5464
  const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
5465
5465
 
5466
5466
  var root_1$2 = $.template(`<button><i></i></button>`);
5467
- 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>`);
5467
+ 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>`);
5468
5468
 
5469
5469
  const $$css$e = {
5470
- hash: 'svelte-1rafop1',
5471
- 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;}'
5470
+ hash: 'svelte-wwv1o',
5471
+ 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;}'
5472
5472
  };
5473
5473
 
5474
5474
  function Slider($$anchor, $$props) {
@@ -5487,6 +5487,7 @@ function Slider($$anchor, $$props) {
5487
5487
 
5488
5488
  useInjectCustomizeCss(props());
5489
5489
 
5490
+ let containerElement = $.mutable_state();
5490
5491
  let slotElement = $.mutable_state();
5491
5492
  let currentIndex = $.mutable_state(0);
5492
5493
  let isDragging = false;
@@ -5494,8 +5495,8 @@ function Slider($$anchor, $$props) {
5494
5495
  let movedX = $.mutable_state(null);
5495
5496
  let childCount = $.mutable_state(0);
5496
5497
  let transformX = $.mutable_state();
5497
-
5498
- console.log('transformX', $.get(transformX));
5498
+ let lastFrame = 0;
5499
+ const THROTTLE = 16;
5499
5500
 
5500
5501
  const computeTransformX = (
5501
5502
  index,
@@ -5519,7 +5520,7 @@ function Slider($$anchor, $$props) {
5519
5520
 
5520
5521
  const moved = movedX ? ` + ${-movedX}px` : '';
5521
5522
 
5522
- return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
5523
+ return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
5523
5524
  };
5524
5525
 
5525
5526
  const handleClickIndicator = (index) => {
@@ -5535,8 +5536,6 @@ function Slider($$anchor, $$props) {
5535
5536
  };
5536
5537
 
5537
5538
  const toNext = () => {
5538
- console.log('toNext');
5539
-
5540
5539
  if ($.get(currentIndex) < $.get(childCount) - 1) {
5541
5540
  $.set(currentIndex, $.get(currentIndex) + 1);
5542
5541
  } else if (props().loop) {
@@ -5553,20 +5552,33 @@ function Slider($$anchor, $$props) {
5553
5552
  };
5554
5553
 
5555
5554
  const handleClick = (e) => {
5556
- if (isDragging) {
5555
+ const isParentContainer = (el) => {
5556
+ if (!el) return false;
5557
+ return el === $.get(containerElement) || isParentContainer(el.parentElement);
5558
+ };
5559
+
5560
+ if (isParentContainer(e.target) && isDragging) {
5557
5561
  e.preventDefault();
5558
5562
  e.stopPropagation();
5559
5563
  }
5560
5564
  };
5561
5565
 
5562
- const handleTouchmove = (e) => {
5563
- $.set(movedX, startX - e.touches[0].clientX);
5566
+ const move = (moved) => {
5567
+ $.set(movedX, moved);
5564
5568
 
5565
- if ($.get(movedX) > 10 || $.get(movedX) < -10) {
5569
+ if ((moved > 10 || moved < -10) && !isDragging) {
5566
5570
  isDragging = true;
5567
5571
  }
5568
5572
  };
5569
5573
 
5574
+ const handleTouchmove = (e) => {
5575
+ const now = performance.now();
5576
+
5577
+ if (now - lastFrame < THROTTLE) return;
5578
+ move(startX - e.touches[0].clientX);
5579
+ lastFrame = now;
5580
+ };
5581
+
5570
5582
  const handleTouchend = () => {
5571
5583
  if ($.get(movedX) >= 32) {
5572
5584
  toNext();
@@ -5584,16 +5596,12 @@ function Slider($$anchor, $$props) {
5584
5596
  startX = e.touches[0].clientX;
5585
5597
  isDragging = false;
5586
5598
  document.addEventListener('touchmove', handleTouchmove, { passive: true });
5587
- document.addEventListener('touchend', handleTouchend, { passive: true });
5588
- document.addEventListener('click', handleClick, { capture: true });
5599
+ document.addEventListener('touchend', handleTouchend, { passive: false });
5600
+ document.addEventListener('click', handleClick);
5589
5601
  };
5590
5602
 
5591
5603
  const handleMousemove = (e) => {
5592
- $.set(movedX, startX - e.clientX);
5593
-
5594
- if ($.get(movedX) > 10 || $.get(movedX) < -10) {
5595
- isDragging = true;
5596
- }
5604
+ move(startX - e.clientX);
5597
5605
  };
5598
5606
 
5599
5607
  const handleMouseup = (e) => {
@@ -5606,7 +5614,6 @@ function Slider($$anchor, $$props) {
5606
5614
  $.set(movedX, null);
5607
5615
 
5608
5616
  if (isDragging) {
5609
- // e.preventDefault()
5610
5617
  e.stopPropagation();
5611
5618
  }
5612
5619
 
@@ -5638,7 +5645,6 @@ function Slider($$anchor, $$props) {
5638
5645
  }
5639
5646
 
5640
5647
  return () => {
5641
- // clearInterval(childCountTimer)
5642
5648
  if (autoSlideTimer) clearInterval(autoSlideTimer);
5643
5649
  };
5644
5650
  });
@@ -5729,7 +5735,8 @@ function Slider($$anchor, $$props) {
5729
5735
  borderRadius: '100%',
5730
5736
  display: 'block',
5731
5737
  background: '#AAAAAA',
5732
- border: 0
5738
+ border: 0,
5739
+ cursor: 'pointer'
5733
5740
  });
5734
5741
  });
5735
5742
 
@@ -5745,6 +5752,7 @@ function Slider($$anchor, $$props) {
5745
5752
  $.reset(ul);
5746
5753
  $.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
5747
5754
  $.reset(div_1);
5755
+ $.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
5748
5756
 
5749
5757
  var div_2 = $.sibling(div_1, 2);
5750
5758
 
@@ -5430,11 +5430,11 @@ const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
5430
5430
  const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
5431
5431
 
5432
5432
  var root_1$2 = $.template(`<button><i></i></button>`);
5433
- 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>`);
5433
+ 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>`);
5434
5434
 
5435
5435
  const $$css$e = {
5436
- hash: 'svelte-1rafop1',
5437
- 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;}'
5436
+ hash: 'svelte-wwv1o',
5437
+ 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;}'
5438
5438
  };
5439
5439
 
5440
5440
  function Slider($$anchor, $$props) {
@@ -5453,6 +5453,7 @@ function Slider($$anchor, $$props) {
5453
5453
 
5454
5454
  useInjectCustomizeCss(props());
5455
5455
 
5456
+ let containerElement = $.mutable_state();
5456
5457
  let slotElement = $.mutable_state();
5457
5458
  let currentIndex = $.mutable_state(0);
5458
5459
  let isDragging = false;
@@ -5460,8 +5461,8 @@ function Slider($$anchor, $$props) {
5460
5461
  let movedX = $.mutable_state(null);
5461
5462
  let childCount = $.mutable_state(0);
5462
5463
  let transformX = $.mutable_state();
5463
-
5464
- console.log('transformX', $.get(transformX));
5464
+ let lastFrame = 0;
5465
+ const THROTTLE = 16;
5465
5466
 
5466
5467
  const computeTransformX = (
5467
5468
  index,
@@ -5485,7 +5486,7 @@ function Slider($$anchor, $$props) {
5485
5486
 
5486
5487
  const moved = movedX ? ` + ${-movedX}px` : '';
5487
5488
 
5488
- return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
5489
+ return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
5489
5490
  };
5490
5491
 
5491
5492
  const handleClickIndicator = (index) => {
@@ -5501,8 +5502,6 @@ function Slider($$anchor, $$props) {
5501
5502
  };
5502
5503
 
5503
5504
  const toNext = () => {
5504
- console.log('toNext');
5505
-
5506
5505
  if ($.get(currentIndex) < $.get(childCount) - 1) {
5507
5506
  $.set(currentIndex, $.get(currentIndex) + 1);
5508
5507
  } else if (props().loop) {
@@ -5519,20 +5518,33 @@ function Slider($$anchor, $$props) {
5519
5518
  };
5520
5519
 
5521
5520
  const handleClick = (e) => {
5522
- if (isDragging) {
5521
+ const isParentContainer = (el) => {
5522
+ if (!el) return false;
5523
+ return el === $.get(containerElement) || isParentContainer(el.parentElement);
5524
+ };
5525
+
5526
+ if (isParentContainer(e.target) && isDragging) {
5523
5527
  e.preventDefault();
5524
5528
  e.stopPropagation();
5525
5529
  }
5526
5530
  };
5527
5531
 
5528
- const handleTouchmove = (e) => {
5529
- $.set(movedX, startX - e.touches[0].clientX);
5532
+ const move = (moved) => {
5533
+ $.set(movedX, moved);
5530
5534
 
5531
- if ($.get(movedX) > 10 || $.get(movedX) < -10) {
5535
+ if ((moved > 10 || moved < -10) && !isDragging) {
5532
5536
  isDragging = true;
5533
5537
  }
5534
5538
  };
5535
5539
 
5540
+ const handleTouchmove = (e) => {
5541
+ const now = performance.now();
5542
+
5543
+ if (now - lastFrame < THROTTLE) return;
5544
+ move(startX - e.touches[0].clientX);
5545
+ lastFrame = now;
5546
+ };
5547
+
5536
5548
  const handleTouchend = () => {
5537
5549
  if ($.get(movedX) >= 32) {
5538
5550
  toNext();
@@ -5550,16 +5562,12 @@ function Slider($$anchor, $$props) {
5550
5562
  startX = e.touches[0].clientX;
5551
5563
  isDragging = false;
5552
5564
  document.addEventListener('touchmove', handleTouchmove, { passive: true });
5553
- document.addEventListener('touchend', handleTouchend, { passive: true });
5554
- document.addEventListener('click', handleClick, { capture: true });
5565
+ document.addEventListener('touchend', handleTouchend, { passive: false });
5566
+ document.addEventListener('click', handleClick);
5555
5567
  };
5556
5568
 
5557
5569
  const handleMousemove = (e) => {
5558
- $.set(movedX, startX - e.clientX);
5559
-
5560
- if ($.get(movedX) > 10 || $.get(movedX) < -10) {
5561
- isDragging = true;
5562
- }
5570
+ move(startX - e.clientX);
5563
5571
  };
5564
5572
 
5565
5573
  const handleMouseup = (e) => {
@@ -5572,7 +5580,6 @@ function Slider($$anchor, $$props) {
5572
5580
  $.set(movedX, null);
5573
5581
 
5574
5582
  if (isDragging) {
5575
- // e.preventDefault()
5576
5583
  e.stopPropagation();
5577
5584
  }
5578
5585
 
@@ -5604,7 +5611,6 @@ function Slider($$anchor, $$props) {
5604
5611
  }
5605
5612
 
5606
5613
  return () => {
5607
- // clearInterval(childCountTimer)
5608
5614
  if (autoSlideTimer) clearInterval(autoSlideTimer);
5609
5615
  };
5610
5616
  });
@@ -5695,7 +5701,8 @@ function Slider($$anchor, $$props) {
5695
5701
  borderRadius: '100%',
5696
5702
  display: 'block',
5697
5703
  background: '#AAAAAA',
5698
- border: 0
5704
+ border: 0,
5705
+ cursor: 'pointer'
5699
5706
  });
5700
5707
  });
5701
5708
 
@@ -5711,6 +5718,7 @@ function Slider($$anchor, $$props) {
5711
5718
  $.reset(ul);
5712
5719
  $.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
5713
5720
  $.reset(div_1);
5721
+ $.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
5714
5722
 
5715
5723
  var div_2 = $.sibling(div_1, 2);
5716
5724
 
@@ -5430,11 +5430,11 @@ const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
5430
5430
  const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
5431
5431
 
5432
5432
  var root_1$2 = $.template(`<button><i></i></button>`);
5433
- 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>`);
5433
+ 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>`);
5434
5434
 
5435
5435
  const $$css$e = {
5436
- hash: 'svelte-1rafop1',
5437
- 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;}'
5436
+ hash: 'svelte-wwv1o',
5437
+ 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;}'
5438
5438
  };
5439
5439
 
5440
5440
  function Slider($$anchor, $$props) {
@@ -5453,6 +5453,7 @@ function Slider($$anchor, $$props) {
5453
5453
 
5454
5454
  useInjectCustomizeCss(props());
5455
5455
 
5456
+ let containerElement = $.mutable_state();
5456
5457
  let slotElement = $.mutable_state();
5457
5458
  let currentIndex = $.mutable_state(0);
5458
5459
  let isDragging = false;
@@ -5460,8 +5461,8 @@ function Slider($$anchor, $$props) {
5460
5461
  let movedX = $.mutable_state(null);
5461
5462
  let childCount = $.mutable_state(0);
5462
5463
  let transformX = $.mutable_state();
5463
-
5464
- console.log('transformX', $.get(transformX));
5464
+ let lastFrame = 0;
5465
+ const THROTTLE = 16;
5465
5466
 
5466
5467
  const computeTransformX = (
5467
5468
  index,
@@ -5485,7 +5486,7 @@ function Slider($$anchor, $$props) {
5485
5486
 
5486
5487
  const moved = movedX ? ` + ${-movedX}px` : '';
5487
5488
 
5488
- return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
5489
+ return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
5489
5490
  };
5490
5491
 
5491
5492
  const handleClickIndicator = (index) => {
@@ -5501,8 +5502,6 @@ function Slider($$anchor, $$props) {
5501
5502
  };
5502
5503
 
5503
5504
  const toNext = () => {
5504
- console.log('toNext');
5505
-
5506
5505
  if ($.get(currentIndex) < $.get(childCount) - 1) {
5507
5506
  $.set(currentIndex, $.get(currentIndex) + 1);
5508
5507
  } else if (props().loop) {
@@ -5519,20 +5518,33 @@ function Slider($$anchor, $$props) {
5519
5518
  };
5520
5519
 
5521
5520
  const handleClick = (e) => {
5522
- if (isDragging) {
5521
+ const isParentContainer = (el) => {
5522
+ if (!el) return false;
5523
+ return el === $.get(containerElement) || isParentContainer(el.parentElement);
5524
+ };
5525
+
5526
+ if (isParentContainer(e.target) && isDragging) {
5523
5527
  e.preventDefault();
5524
5528
  e.stopPropagation();
5525
5529
  }
5526
5530
  };
5527
5531
 
5528
- const handleTouchmove = (e) => {
5529
- $.set(movedX, startX - e.touches[0].clientX);
5532
+ const move = (moved) => {
5533
+ $.set(movedX, moved);
5530
5534
 
5531
- if ($.get(movedX) > 10 || $.get(movedX) < -10) {
5535
+ if ((moved > 10 || moved < -10) && !isDragging) {
5532
5536
  isDragging = true;
5533
5537
  }
5534
5538
  };
5535
5539
 
5540
+ const handleTouchmove = (e) => {
5541
+ const now = performance.now();
5542
+
5543
+ if (now - lastFrame < THROTTLE) return;
5544
+ move(startX - e.touches[0].clientX);
5545
+ lastFrame = now;
5546
+ };
5547
+
5536
5548
  const handleTouchend = () => {
5537
5549
  if ($.get(movedX) >= 32) {
5538
5550
  toNext();
@@ -5550,16 +5562,12 @@ function Slider($$anchor, $$props) {
5550
5562
  startX = e.touches[0].clientX;
5551
5563
  isDragging = false;
5552
5564
  document.addEventListener('touchmove', handleTouchmove, { passive: true });
5553
- document.addEventListener('touchend', handleTouchend, { passive: true });
5554
- document.addEventListener('click', handleClick, { capture: true });
5565
+ document.addEventListener('touchend', handleTouchend, { passive: false });
5566
+ document.addEventListener('click', handleClick);
5555
5567
  };
5556
5568
 
5557
5569
  const handleMousemove = (e) => {
5558
- $.set(movedX, startX - e.clientX);
5559
-
5560
- if ($.get(movedX) > 10 || $.get(movedX) < -10) {
5561
- isDragging = true;
5562
- }
5570
+ move(startX - e.clientX);
5563
5571
  };
5564
5572
 
5565
5573
  const handleMouseup = (e) => {
@@ -5572,7 +5580,6 @@ function Slider($$anchor, $$props) {
5572
5580
  $.set(movedX, null);
5573
5581
 
5574
5582
  if (isDragging) {
5575
- // e.preventDefault()
5576
5583
  e.stopPropagation();
5577
5584
  }
5578
5585
 
@@ -5604,7 +5611,6 @@ function Slider($$anchor, $$props) {
5604
5611
  }
5605
5612
 
5606
5613
  return () => {
5607
- // clearInterval(childCountTimer)
5608
5614
  if (autoSlideTimer) clearInterval(autoSlideTimer);
5609
5615
  };
5610
5616
  });
@@ -5695,7 +5701,8 @@ function Slider($$anchor, $$props) {
5695
5701
  borderRadius: '100%',
5696
5702
  display: 'block',
5697
5703
  background: '#AAAAAA',
5698
- border: 0
5704
+ border: 0,
5705
+ cursor: 'pointer'
5699
5706
  });
5700
5707
  });
5701
5708
 
@@ -5711,6 +5718,7 @@ function Slider($$anchor, $$props) {
5711
5718
  $.reset(ul);
5712
5719
  $.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
5713
5720
  $.reset(div_1);
5721
+ $.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
5714
5722
 
5715
5723
  var div_2 = $.sibling(div_1, 2);
5716
5724
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.268-29089896.0dceea5e",
3
+ "version": "1.1.268-29090020.0f31d4b5",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",