@juspay/svelte-ui-components 1.6.0 → 1.7.0

package/dist/Select/Select.svelte

@@ -139,7 +139,7 @@ onDestroy(() => {
       {#if !properties.hideDropDownIcon}
         <img
           src={dropDownIcon}
-          alt= {dropDownIconAlt}
+          alt={dropDownIconAlt}
           class="arrow {isSelectOpen ? 'active' : ''}"
         />
       {/if}
@@ -252,6 +252,10 @@ onDestroy(() => {
     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 {

package/dist/Select/properties.d.ts

@@ -1,4 +1,4 @@
-import type { ImgProps } from "../Img/properties";
+import type { ImgProps } from '../Img/properties';
 export type SelectProperties = {
     placeholder: string;
     label: string;

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.6.0",
+  "version": "1.7.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",