@juspay/svelte-ui-components 2.77.0 → 2.78.0
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.
|
@@ -9,7 +9,10 @@
|
|
|
9
9
|
showDots = false,
|
|
10
10
|
isScrollableLast = false,
|
|
11
11
|
onkeydown,
|
|
12
|
-
classes
|
|
12
|
+
classes,
|
|
13
|
+
testId,
|
|
14
|
+
dotsWrapperTestId,
|
|
15
|
+
dotTestId
|
|
13
16
|
}: CarouselProperties = $props();
|
|
14
17
|
|
|
15
18
|
let slidesDiv: HTMLDivElement | null = $state(null);
|
|
@@ -138,7 +141,10 @@
|
|
|
138
141
|
});
|
|
139
142
|
</script>
|
|
140
143
|
|
|
141
|
-
<div
|
|
144
|
+
<div
|
|
145
|
+
class="carousel-container {classes ?? ''}"
|
|
146
|
+
data-pw={typeof testId === 'string' ? testId : null}
|
|
147
|
+
>
|
|
142
148
|
{#if views.length > 0}
|
|
143
149
|
<div class="carousel" bind:this={carouselDiv}>
|
|
144
150
|
<div class="slidesDiv" bind:this={slidesDiv}>
|
|
@@ -155,7 +161,10 @@
|
|
|
155
161
|
</div>
|
|
156
162
|
{/if}
|
|
157
163
|
{#if showDots}
|
|
158
|
-
<div
|
|
164
|
+
<div
|
|
165
|
+
class="dots-wrapper"
|
|
166
|
+
data-pw={typeof dotsWrapperTestId === 'string' ? dotsWrapperTestId : null}
|
|
167
|
+
>
|
|
159
168
|
<!-- eslint-disable-next-line -->
|
|
160
169
|
{#each views as _, index}
|
|
161
170
|
<div
|
|
@@ -163,6 +172,7 @@
|
|
|
163
172
|
onclick={() => moveSlideToIndex(index)}
|
|
164
173
|
{onkeydown}
|
|
165
174
|
role="none"
|
|
175
|
+
data-pw={typeof dotTestId === 'string' ? `${dotTestId}-${index + 1}` : null}
|
|
166
176
|
></div>
|
|
167
177
|
{/each}
|
|
168
178
|
</div>
|
|
@@ -13,6 +13,9 @@ export type OptionalCarouselProperties = {
|
|
|
13
13
|
showDots?: boolean;
|
|
14
14
|
isScrollableLast?: boolean;
|
|
15
15
|
classes?: string;
|
|
16
|
+
testId?: string;
|
|
17
|
+
dotsWrapperTestId?: string;
|
|
18
|
+
dotTestId?: string;
|
|
16
19
|
};
|
|
17
20
|
export type CarouselEventProperties = {
|
|
18
21
|
onkeydown?: (event: KeyboardEvent) => void;
|