@juspay/svelte-ui-components 1.0.0 → 1.2.0

package/dist/Animations/ModalAnimation.svelte

@@ -1,6 +1,7 @@
 <script>import { fly, fade } from "svelte/transition";
 export let enable = true;
 export let align = "bottom";
+export let transitionType = "ALL";
 let flyAnimationProperties = { x: 0, y: 0, duration: 380 };
 let fadeAnimationProperties = { duration: 300 };
 switch (align) {
@@ -15,11 +16,21 @@ switch (align) {
 
 {#if enable}
   {#if align === 'top' || align === 'bottom'}
-    <div transition:fly={flyAnimationProperties}>
+    {#if transitionType === 'IN'}
+      <div in:fly|global={flyAnimationProperties}>
+        <slot />
+      </div>
+    {:else}
+      <div in:fly|global={flyAnimationProperties} out:fly|global={flyAnimationProperties}>
+        <slot />
+      </div>
+    {/if}
+  {:else if transitionType === 'IN'}
+    <div in:fade|global={fadeAnimationProperties}>
       <slot />
     </div>
   {:else}
-    <div in:fade={fadeAnimationProperties} out:fade={fadeAnimationProperties}>
+    <div in:fade|global={fadeAnimationProperties} out:fade|global={fadeAnimationProperties}>
       <slot />
     </div>
   {/if}

package/dist/Animations/ModalAnimation.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
 import type { ModalAlign } from '../Modal/properties';
+import type { ModalTransition } from '../types';
 declare const __propDef: {
     props: {
         enable?: boolean | undefined;
         align?: ModalAlign | undefined;
+        transitionType?: ModalTransition | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Button/Button.svelte

@@ -48,8 +48,8 @@ function handleButtonClick() {
     font-family: var(--button-font-family);
     font-weight: var(--button-font-weight, 500);
     font-size: var(--button-font-size, 14px);
-    background-color: var(--button-color, var(--primary-button-color, #3a4550));
-    color: var(--button-text-color, var(--primary-text-color, white));
+    background-color: var(--button-color, #3a4550);
+    color: var(--button-text-color, white);
     height: var(--button-height, fit-content);
     padding: var(--button-padding, 16px);
     margin: var(--button-margin);
@@ -66,6 +66,12 @@ function handleButtonClick() {
     visibility: var(--button-visibility, visible);
   }
 
+  button:hover {
+    background: var(--button-hover-color, var(--button-color, #3a4550));
+    color: var(--button-hover-text-color, var(--button-text-color, white));
+    border: var(--button-hover-border, var(--button-border, none));
+  }
+
   .button-progress-bar {
     position: absolute;
     height: 100%;

package/dist/ListItem/ListItem.svelte

@@ -7,6 +7,7 @@ export let properties = defaultListItemProperties;
 export let showLoader = false;
 export let showRightContentLoader = false;
 export let expand = false;
+export let preventFocus = false;
 function handleLeftImageClick() {
   dispatch("leftImageClick");
 }
@@ -29,9 +30,17 @@ function handleTopSectionClick() {
     {#if showLoader}
       <div class="item-loader" />
     {/if}
-    <div class="item" on:click={handleItemClick} on:keydown role="button" tabindex="0">
+    <div
+      class="item"
+      class:prevent-focus={preventFocus}
+      on:click={handleItemClick}
+      on:keydown
+      role="button"
+      tabindex="0"
+    >
       <div
         class="top-section"
+        class:prevent-focus={preventFocus}
         on:click={handleTopSectionClick}
         on:keydown
         role="button"
@@ -39,7 +48,13 @@ function handleTopSectionClick() {
       >
         <div class="left-content">
           {#if properties.leftImageUrl}
-            <div on:click={handleLeftImageClick} on:keydown role="button" tabindex="0">
+            <div
+              class:prevent-focus={preventFocus}
+              on:click={handleLeftImageClick}
+              on:keydown
+              role="button"
+              tabindex="0"
+            >
               <img class="left-img" src={properties.leftImageUrl} alt="" />
             </div>
           {/if}
@@ -51,6 +66,7 @@ function handleTopSectionClick() {
           {#if properties.label}
             <div
               class="center-text"
+              class:prevent-focus={preventFocus}
               on:click={handleCenterTextClick}
               on:keydown
               role="button"
@@ -69,7 +85,13 @@ function handleTopSectionClick() {
             <slot name="rightContent" />
           {/if}
           {#if properties.rightImageUrl}
-            <div on:click={handleRightImageClick} on:keydown role="button" tabindex="0">
+            <div
+              class:prevent-focus={preventFocus}
+              on:click={handleRightImageClick}
+              on:keydown
+              role="button"
+              tabindex="0"
+            >
               <img class="right-img" src={properties.rightImageUrl} alt="" />
             </div>
           {/if}
@@ -130,6 +152,15 @@ function handleTopSectionClick() {
     box-shadow: var(--list-item-box-shadow, none);
     width: var(--list-item-box-width);
     border-radius: var(--list-item-border-radius, 0px);
+    margin: var(--list-item-margin);
+    padding: var(--list-item-padding);
+    border: var(--list-item-border);
+    transition: var(--list-item-transition);
+  }
+
+  .item:hover {
+    background-color: var(--list-item-hover-background-color, var(--list-item-background-color));
+    border: var(--list-item-hover-border, var(--list-item-border));
   }
 
   .top-section {
@@ -170,6 +201,14 @@ function handleTopSectionClick() {
     border-radius: var(--list-item-left-image-border-radius, 0px);
     margin: var(--list-item-left-image-margin, 0px);
     filter: var(--list-item-left-image-filter, none);
+    background: var(--list-item-left-image-background);
+    border: var(--list-item-left-image-border);
+    transition: var(--list-item-transition);
+  }
+
+  .left-img:hover {
+    background: var(--list-item-left-image-hover-background, var(--list-item-left-image-background));
+    border: var(--list-item-left-image-hover-border, var(--list-item-left-image-border));
   }
 
   .right-img {
@@ -178,6 +217,15 @@ function handleTopSectionClick() {
     padding: var(--list-item-right-image-padding, 0px);
     border-radius: var(--list-item-right-image-border-radius, 0px);
     margin: var(--list-item-right-image-margin, 0px);
+    filter: var(--list-item-right-image-filter);
+    background: var(--list-item-right-image-background);
+    border: var(--list-item-right-image-border);
+    transition: var(--list-item-transition);
+  }
+
+  .right-img:hover {
+    background: var(--list-item-right-image-hover-background, var(--list-item-right-image-background));
+    border: var(--list-item-right-image-hover-border, var(--list-item-right-image-border));
   }
 
   .right-content-text {
@@ -193,4 +241,8 @@ function handleTopSectionClick() {
     font-family: var(--list-item-right-content-text-font-family);
     justify-content: var(--list-item-right-content-text-justify-content);
   }
+
+  .prevent-focus:focus {
+    outline: none;
+  }
 </style>

package/dist/ListItem/ListItem.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         showLoader?: boolean | undefined;
         showRightContentLoader?: boolean | undefined;
         expand?: boolean | undefined;
+        preventFocus?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;

package/dist/Modal/Modal.svelte

@@ -61,7 +61,11 @@ onDestroy(() => {
       role="button"
       tabindex="0"
     >
-      <ModalAnimation enable={properties.enableTransition} align={properties.align}>
+      <ModalAnimation
+        enable={properties.enableTransition}
+        align={properties.align}
+        transitionType={properties.transitionType}
+      >
         <div class="modal-content {properties.size}">
           {#if properties.header.leftImage !== null || properties.header.text !== null || properties.header.rightImage !== null}
             <div class="header">

package/dist/Modal/properties.d.ts

@@ -1,3 +1,4 @@
+import type { ModalTransition } from '../types';
 export type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
 export type ModalAlign = 'top' | 'center' | 'bottom';
 export type ModalProperties = {
@@ -6,6 +7,7 @@ export type ModalProperties = {
     showOverlay: boolean;
     supportHardwareBackPress: boolean;
     enableTransition: boolean;
+    transitionType: ModalTransition;
     header: {
         leftImage: string | null;
         rightImage: string | null;

package/dist/Modal/properties.js

@@ -8,5 +8,6 @@ export const defaultModalProperties = {
         rightImage: null,
         text: null
     },
-    enableTransition: true
+    enableTransition: true,
+    transitionType: 'ALL'
 };

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Banner } from './Banner/Banner.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
+export { default as Table } from './Table/Table.svelte';
 export type { ButtonProperties } from './Button/properties';
 export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
 export type { InputProperties } from './Input/properties';
@@ -34,6 +35,7 @@ export type { ToolbarProperties } from './Toolbar/properties';
 export type { CarouselProperties } from './Carousel/properties';
 export type { BadgeProperties } from './Badge/properties';
 export type { BannerProperties } from './Banner/properties';
+export type { TableProperties } from './Table/properties';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/dist/index.js

@@ -17,6 +17,7 @@ export { default as Banner } from './Banner/Banner.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
+export { default as Table } from './Table/Table.svelte';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/dist/types.d.ts

@@ -3,6 +3,7 @@
  * @description Different types of input data which can be passed to the Input Component
  */
 export type InputDataType = 'text' | 'tel' | 'password' | 'email';
+export type ModalTransition = 'IN' | 'ALL';
 export type AutoCompleteType = 'tel' | 'name' | 'email' | 'one-time-code' | 'postal-code' | 'street-address' | 'on' | 'address-level1';
 /**
  * @name CustomValidator

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
-    "publish": "node --experimental-json-modules scripts/publish.js",
     "prepublishOnly": "npm run package",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -16,9 +15,6 @@
     "test:integration": "playwright test",
     "test:unit": "vitest"
   },
-  "author": {
-    "name": "Juspay Technologies Pvt Ltd"
-  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",