@juspay/svelte-ui-components 1.31.0 → 1.33.0

package/dist/Button/Button.svelte

@@ -26,7 +26,7 @@ function handleButtonClick() {
     on:click={handleButtonClick}
     disabled={!(properties.enable && !properties.showLoader)}
     type={properties.type}
-    data-pw={properties.dataPw}
+    data-pw={properties.testId}
   >
     {#if properties.showLoader && properties.loaderType === 'Circular'}
       <div class="button-loader"><Loader /></div>

package/dist/Button/properties.d.ts

@@ -5,6 +5,6 @@ export type ButtonProperties = {
     showLoader: boolean;
     loaderType: LoaderType | null;
     type: 'submit' | 'reset' | 'button';
-    dataPw?: string;
+    testId?: string;
 };
 export declare const defaultButtonProperties: ButtonProperties;

package/dist/Input/Input.svelte

@@ -147,7 +147,7 @@ $: {
       on:input={onInput}
       on:paste={onPaste}
       on:click={onClick}
-      data-pw={properties.dataPw}
+      data-pw={properties.testId}
       class="
       {properties.actionInput ? 'action-input' : ''}
     "
@@ -173,7 +173,7 @@ $: {
 <style>
   textarea,
   input {
-    box-sizing: border-box;
+    box-sizing: var(--input-box-sizing, border-box);
     height: var(--input-height, fit-content);
     background-color: var(--input-background, white);
     font-size: var(--input-font-size, 16px) !important;

package/dist/Input/properties.d.ts

@@ -21,6 +21,6 @@ export type InputProperties = {
     autoComplete: AutoCompleteType;
     name: string;
     textTransformers: TextTransformer[];
-    dataPw?: string;
+    testId?: string;
 };
 export declare const defaultInputProperties: InputProperties;

package/dist/InputButton/InputButton.svelte

@@ -150,11 +150,12 @@ export function focus() {
     font-weight: var(--input-label-msg-text-weight, 400);
     font-size: var(--input-label-msg-text-size, 12px);
     color: var(--input-label-msg-text-color, #637c95);
+    line-height: var(--input-label-msg-text-line-height);
     margin-bottom: 6px;
   }
 
   .invalid {
-    outline: 1px solid var(--input-field-error-stroke, #e11900);
+    outline: var(--invalid-outline, 1px solid var(--input-field-error-stroke, #e11900));
   }
 
   .error-message {

package/dist/Modal/Modal.svelte

@@ -93,18 +93,12 @@ onDestroy(() => {
                 </div>
               {/if}
               {#if properties.header.text}
-                <div class="header-text">
+                <div class="header-text" data-pw={properties.header.testId}>
                   {properties.header.text}
                 </div>
               {/if}
               {#if properties.header.rightImage}
-                <div
-                  role="button"
-                  tabindex="0"
-                  on:click={handleRightImageClick}
-                  on:keydown
-                  data-pw={properties.rightImageTestId}
-                >
+                <div role="button" tabindex="0" on:click={handleRightImageClick} on:keydown data-pw={properties.header.buttonTestId}>
                   <img class="header-right-img" src={properties.header.rightImage} alt="" />
                 </div>
               {/if}
@@ -323,5 +317,6 @@ onDestroy(() => {
   .header-right-img {
     width: var(--header-right-image-width, 25px);
     height: var(--header-right-image-height, 25px);
+    padding: var(--header-right-image-padding);
   }
 </style>

package/dist/Modal/properties.d.ts

@@ -13,6 +13,8 @@ export type ModalProperties = {
         leftImage: string | null;
         rightImage: string | null;
         text: string | null;
+        testId?: string;
+        buttonTestId?: string;
     };
     footer?: {
         primaryButton?: ButtonProperties;

package/dist/Select/Select.svelte

@@ -109,7 +109,7 @@ onDestroy(() => {
 </script>
 
 {#if properties.label !== null && properties.label !== ''}
-  <label class="label-container" for={properties.label}>
+  <label class="label-container" for={properties.label} data-pw={properties.labelTestId}>
     {properties.label}
   </label>
 {/if}
@@ -123,6 +123,7 @@ onDestroy(() => {
       on:keydown
       role="button"
       tabindex="0"
+      data-pw={properties.testId}
     >
       {#if properties.leftIcon !== null}
         <div class="icon-container">
@@ -190,6 +191,7 @@ onDestroy(() => {
             class="item {isSelected(properties.selectedItem, item) ? ' item-selected' : ''}"
             role="button"
             tabindex="0"
+            data-pw={`${properties.itemTestId}-${item}`}
           >
             {#if properties.selectMultipleItems}
               <CheckListItem checked={isSelected(properties.selectedItem, item)} text="" />

package/dist/Select/properties.d.ts

@@ -13,4 +13,7 @@ export type SelectProperties = {
     showSingleSelectButton?: boolean | null;
     showSelectedItem?: boolean;
     showSelectedItemCount?: boolean;
+    testId?: string;
+    labelTestId?: string;
+    itemTestId?: string;
 };

package/dist/Toast/Toast.svelte

@@ -77,10 +77,10 @@ onDestroy(() => {
       </div>
     {/if}
 
-    <div class="toast-message">
+    <div class="toast-message" data-pw={properties.messageTestId}>
       {properties.message}
       {#if properties.subtext}
-        <div class="toast-subtext">{properties.subtext}</div>
+        <div class="toast-subtext" data-pw={properties.subTextTestId}>{properties.subtext}</div>
       {/if}
 
       {#if $$slots.bottomContent}
@@ -89,7 +89,7 @@ onDestroy(() => {
     </div>
 
     {#if properties.rightIcon}
-      <div class="close-button" tabindex="0" role="button" on:click={hideToast} on:keypress>
+      <div class="close-button" tabindex="0" role="button" on:click={hideToast} on:keypress data-pw={properties.closeIconTestId}>
         <img class="toast-icon" src={properties.rightIcon} alt="close-icon" />
       </div>
     {/if}

package/dist/Toast/properties.d.ts

@@ -13,5 +13,9 @@ export type ToastProperties = {
     inAnimationDuration?: number;
     outAnimationOffset?: number;
     outAnimationDuration?: number;
+    testId?: string;
+    messageTestId?: string;
+    subTextTestId?: string;
+    closeIconTestId?: string;
 };
 export declare const defaultToastProperties: ToastProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.31.0",
+  "version": "1.33.0",
   "scripts": {
     "dev": "vite dev --host",
     "build": "vite build && npm run package",
@@ -36,7 +36,7 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@playwright/test": "^1.39.0",
     "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.27.6",
+    "@sveltejs/kit": "^2.20.6",
     "@sveltejs/package": "^2.2.2",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",