@juspay/svelte-ui-components 1.5.0 → 1.7.0

package/dist/Banner/Banner.svelte

@@ -23,14 +23,14 @@
     position: var(--banner-position, sticky);
     top: var(--banner-top, 0px);
     display: var(--banner-display, flex);
-    align-items: center;
+    align-items: var(--banner-align-items, center);
     background-color: var(--banner-bg-color, #637c9529);
     width: var(--banner-width, 100%);
     height: var(--banner-height, 37px);
     padding: var(--banner-padding, 10px 12px, 10px, 12px);
     gap: var(--banner-gap, 8px);
-    justify-content: center;
-    cursor: pointer;
+    justify-content: var(--banner-justify-content, center);
+    cursor: var(--banner-cursor, pointer);
   }
 
   .banner-image {
@@ -38,7 +38,7 @@
     width: var(--banner-img-width, 18px);
     height: var(--banner-img-height, 11.69px);
     margin-bottom: var(--banner-img-margin-bottom, 6px);
-    align-items: center;
+    align-items: var(--banner-image-align-items, center);
   }
 
   .banner-text {
@@ -49,10 +49,10 @@
     font-size: var(--banner-font-size, 14px);
     line-height: var(--banner-line-height, 17.75px);
     font-weight: var(--banner-font-weight, 500);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    align-items: center;
+    overflow: var(--banner-overflow, hidden);
+    text-overflow: var(--banner-text-overflow, ellipsis);
+    white-space: var(--banner-text-white-space, nowrap);
+    align-items: var(--banner-text-align-items, center);
   }
 
   .link-text {

package/dist/Img/properties.d.ts

@@ -0,0 +1,5 @@
+export type ImgProps = {
+    src: string;
+    alt: string;
+    fallback: string | null;
+};

package/dist/Img/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/ListItem/ListItem.svelte

@@ -175,7 +175,7 @@ function handleTopSectionClick() {
   }
 
   .left-content {
-    display: flex;
+    display: var(--list-item-left-content-display, flex);
     --image-height: var(--list-item-left-image-height, 24px);
     --image-width: var(--list-item-left-image-width, 24px);
     --image-padding: var(--list-item-left-image-padding, 0px);
@@ -218,7 +218,7 @@ function handleTopSectionClick() {
   }
 
   .right-content {
-    display: flex;
+    display: var(--list-item-right-content-display, flex);
   }
 
   .bottom-section {

package/dist/Select/Select.svelte

@@ -1,6 +1,8 @@
 <script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import Img from "../Img/Img.svelte";
 import Button from "../Button/Button.svelte";
 let selectedElementDiv = null;
+export let dropDownIconAlt = "";
 export let properties = {
   placeholder: "",
   label: "",
@@ -8,8 +10,10 @@ export let properties = {
   selectedItem: "",
   selectedItemLabel: null,
   showSelectedItemInDropdown: false,
-  selectMultipleItems: false
+  selectMultipleItems: false,
+  leftIcon: null
 };
+const dropDownIcon = properties.dropDownIcon ?? "https://sdk.breeze.in/gallery/icons/down-arrow.svg";
 const applyButtonProps = {
   text: "Apply",
   enable: true,
@@ -111,6 +115,11 @@ onDestroy(() => {
       role="button"
       tabindex="0"
     >
+      {#if properties.leftIcon !== null}
+        <div class="icon-container">
+          <Img {...properties.leftIcon} />
+        </div>
+      {/if}
       {#if properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)}
         {#if properties.selectedItem.length === 0}
           {properties.placeholder}
@@ -127,11 +136,13 @@ onDestroy(() => {
         {properties.selectedItemLabel}
       {/if}
       <div class="filler" />
-      <img
-        src="https://sdk.breeze.in/gallery/icons/right-arrow.svg"
-        alt=""
-        class="arrow {isSelectOpen ? 'active' : ''}"
-      />
+      {#if !properties.hideDropDownIcon}
+        <img
+          src={dropDownIcon}
+          alt={dropDownIconAlt}
+          class="arrow {isSelectOpen ? 'active' : ''}"
+        />
+      {/if}
     </div>
     <div
       class="non-selected-items"
@@ -173,7 +184,7 @@ onDestroy(() => {
     font-weight: var(--select-font-weight, 400);
     width: var(--select-width, 100%);
     min-width: var(--select-min-width);
-    box-shadow: 0px 1px 8px #2f537733;
+    box-shadow: var(--select-box-shadow, 0px 1px 8px #2f537733);
     -webkit-appearance: none !important; /* For Safari MWeb */
     outline: none;
     cursor: pointer;
@@ -187,15 +198,18 @@ onDestroy(() => {
     --button-border-radius: 2px;
   }
 
+  .select:hover {
+    background-color: var(--select-hover-bgcolor, #ffffff);
+  }
+
   .arrow {
-    height: 16px;
-    width: 16px;
-    transform: rotate(-0.25turn);
+    height: var(--dropdown-arrow-icon-height, 16px);
+    width: var(--dropdown-arrow-icon-width, 16px);
     transition: transform 0.1s;
   }
 
   .active {
-    transform: rotate(0.25turn);
+    transform: rotate(0.5turn);
   }
 
   .item {
@@ -227,15 +241,21 @@ onDestroy(() => {
   .non-selected-items {
     display: var(--non-selected-display);
     background-color: var(--non-selected-item-bgcolor, #ffffff);
+    color: var(--non-selected-item-color);
     box-shadow: 0px 1px 8px #2f537733;
     width: var(--non-selected-width, fit-content);
     min-width: var(--non-selected-min-width, 100%);
     position: absolute;
-    border-radius: 4px 4px 4px 4px;
-    margin: 4px 0px 0px 0px;
+    border-radius: var(--non-selected-border-radius, 4px);
+    margin: var(--non-selected-margin, 4px 0px 0px 0px);
     z-index: 10;
     word-wrap: var(--non-selected-word-break, break-word);
     white-space: var(--non-selected-white-space);
+    font-weight: var(--non-select-font-weight, 500);
+    left: var(--non-selected-left);
+    right: var(--non-selected-right);
+    top: var(--non-selected-top);
+    bottom: var(--non-selected-bottom);
   }
 
   ::-webkit-scrollbar {
@@ -249,7 +269,7 @@ onDestroy(() => {
   }
 
   .item-selected::after {
-    content: '✔';
+    content: var(--selected-option-icon, '✔');
     position: absolute;
     right: 7px;
   }
@@ -268,4 +288,19 @@ onDestroy(() => {
     white-space: var(--multipleSelect-btn-white-space, nowrap);
     padding: var(--multipleSelect-btn-padding, 2px);
   }
+
+  .icon-container {
+    width: var(--select-icon-container-width, fit-content);
+    height: var(--select-icon-container-height, fit-content);
+    border-radius: var(--select-icon-container-border-radius);
+    opacity: var(--select-icon-container-opacity);
+    background: var(--select-icon-container-background);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: var(--select-icon-container-margin, 0px 8px 0px 0px);
+    padding: var(--select-icon-container-padding);
+    --image-height: var(--select-icon-height);
+    --image-width: var(--select-icon-height);
+  }
 </style>

package/dist/Select/Select.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { SelectProperties } from './properties';
 declare const __propDef: {
     props: {
+        dropDownIconAlt?: string | undefined;
         properties?: SelectProperties | undefined;
     };
     events: {

package/dist/Select/properties.d.ts

@@ -1,3 +1,4 @@
+import type { ImgProps } from '../Img/properties';
 export type SelectProperties = {
     placeholder: string;
     label: string;
@@ -6,4 +7,7 @@ export type SelectProperties = {
     selectedItemLabel: string | string[] | null;
     showSelectedItemInDropdown: boolean;
     selectMultipleItems: boolean;
+    hideDropDownIcon?: boolean;
+    dropDownIcon?: string;
+    leftIcon: ImgProps | null;
 };

package/dist/Toast/Toast.svelte

@@ -0,0 +1,116 @@
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import { fly } from "svelte/transition";
+import { defaultToastProperties } from "./properties";
+export let properties = defaultToastProperties;
+const dispatch = createEventDispatcher();
+let showToast = false;
+let timeoutId = null;
+function hideToast() {
+  showToast = false;
+}
+function handleAnimationEnd() {
+  dispatch("onToastHide");
+}
+onMount(() => {
+  showToast = true;
+  timeoutId = setTimeout(hideToast, properties.duration);
+});
+onDestroy(() => {
+  if (timeoutId !== null) {
+    clearTimeout(timeoutId);
+  }
+});
+</script>
+
+{#if showToast}
+  <div
+    class="toast {properties.type ?? ''}"
+    in:fly={{ x: 500, y: 0, duration: 400 }}
+    out:fly={{ x: 500, y: 0, duration: 800 }}
+    on:outroend={handleAnimationEnd}
+  >
+    {#if properties.leftIcon}
+      <div class="toast-icon-wrapper">
+        <img class="toast-icon" src={properties.leftIcon} alt="toast-icon" />
+      </div>
+    {/if}
+
+    <div class="toast-message">
+      {properties.message}
+    </div>
+
+    {#if properties.rightIcon}
+      <div class="close-button" tabindex="0" role="button" on:click={hideToast} on:keypress>
+        <img class="toast-icon" src={properties.rightIcon} alt="close-icon" />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .toast {
+    padding: var(--toast-padding, 10px);
+    font-size: var(--toast-font-size, 14px);
+    height: var(--toast-height, auto);
+    border-radius: var(--toast-border-radius, 0px);
+    width: var(--toast-width, auto);
+    align-items: var(--toast-align-items, center);
+    margin: var(--toast-margin, 0px 10px 10px 10px);
+    justify-content: var(--toast-justify-content, space-between);
+    z-index: var(--toast-z-index, 1000);
+    display: var(--taost-dispay, flex);
+    position: var(--toast-position, absolute);
+    left: var(--toast-left, 0);
+    right: var(--toast-right, 0);
+    background-color: var(--default-background-color, #87ceeb);
+  }
+  .toast-icon-wrapper {
+    width: var(--toast-icon-wrapper-width, 20px);
+    height: var(--toast-icon-wrapper-height, 20px);
+    margin: var(--toast-icon-margin, 0 6px 0 0);
+    padding: var(--toast-icon-wrapper-padding, 1px);
+  }
+
+  .toast-icon {
+    height: var(--toast-icon-height, 100%);
+    border-radius: var(--toast-icon-border-radius, 50%);
+  }
+
+  .toast-message {
+    display: var(--toast-message-display, flex);
+    flex: var(--taost-message-flex, 1);
+    padding: var(--toast-message-padding, 1px);
+  }
+
+  .close-button {
+    width: var(--toast-close-button-width, 20px);
+    height: var(--toast-close-button-height, 20px);
+    cursor: var(--toast-close-button-cursor, pointer);
+    gap: var(--toast-close-button-gap, 6px);
+    margin: var(--toast-close-button-margin, 0 0 0 10px);
+    display: var(--toast-close-button-display, flex);
+    align-items: var(--toast-close-button-align-items, center);
+    justify-content: var(--toast-close-button-justify-content, center);
+    padding: var(--toast-close-button-padding, 1px);
+  }
+
+  .success {
+    color: var(--toast-success-text, #fff);
+    background-color: var(--toast-background-color, #24aa5a);
+  }
+
+  .info {
+    color: var(--toast-info-text, #fff);
+    background-color: var(--toast-background-color, #87ceeb);
+  }
+
+  .warn {
+    color: var(--toast-warn-text, #fff);
+    background-color: var(--toast-background-color, #f3a42d);
+  }
+
+  .error {
+    color: var(--toast-error-text, #fff);
+    background-color: var(--toast-background-color, #f04438);
+  }
+</style>

package/dist/Toast/Toast.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { type ToastProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: ToastProperties | undefined;
+    };
+    events: {
+        keypress: KeyboardEvent;
+        onToastHide: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastProps = typeof __propDef.props;
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/dist/Toast/properties.d.ts

@@ -0,0 +1,9 @@
+export type ToastType = 'success' | 'error' | 'info' | 'warn';
+export type ToastProperties = {
+    duration: number;
+    leftIcon?: string;
+    message: string;
+    rightIcon?: string;
+    type?: ToastType;
+};
+export declare const defaultToastProperties: ToastProperties;

package/dist/Toast/properties.js

@@ -0,0 +1,4 @@
+export const defaultToastProperties = {
+    duration: 2000,
+    message: ''
+};

package/dist/Toolbar/Toolbar.svelte

@@ -45,7 +45,7 @@ function handleBackClick() {
     padding: var(--toolbar-padding, 0px);
     height: fit-content;
     width: 100vw;
-    position: fixed;
+    position: var(--toolbar-position, fixed);
     top: 0;
     left: 0;
     right: 0;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as Stepper } from './Stepper/Stepper.svelte';
 export { default as Step } from './Stepper/Step.svelte';
+export { default as Toast } from './Toast/Toast.svelte';
 export type { ButtonProperties } from './Button/properties';
 export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
 export type { InputProperties } from './Input/properties';
@@ -39,6 +40,7 @@ export type { BadgeProperties } from './Badge/properties';
 export type { BannerProperties } from './Banner/properties';
 export type { TableProperties } from './Table/properties';
 export type { StepperProperties } from './Stepper/properties';
+export type { ToastProperties } from './Toast/properties';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';
@@ -49,4 +51,5 @@ export { defaultStatusProperties } from './Status/properties';
 export { defaultListItemProperties } from './ListItem/properties';
 export { defaultToolbarProperties } from './Toolbar/properties';
 export { defaultCarouselProperties } from './Carousel/properties';
+export { defaultToastProperties } from './Toast/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -20,6 +20,7 @@ export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as Stepper } from './Stepper/Stepper.svelte';
 export { default as Step } from './Stepper/Step.svelte';
+export { default as Toast } from './Toast/Toast.svelte';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';
@@ -30,4 +31,5 @@ export { defaultStatusProperties } from './Status/properties';
 export { defaultListItemProperties } from './ListItem/properties';
 export { defaultToolbarProperties } from './Toolbar/properties';
 export { defaultCarouselProperties } from './Carousel/properties';
+export { defaultToastProperties } from './Toast/properties';
 export { validateInput } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -54,7 +54,7 @@
     "svelte-check": "^3.6.0",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.5.2",
+    "vite": "^4.5.3",
     "vitest": "^0.34.6",
     "type-decoder": "^1.2.0"
   },