@juspay/svelte-ui-components 1.6.0 → 1.8.0

package/dist/Input/Input.svelte

@@ -192,6 +192,7 @@ $: {
   .input-container {
     display: flex;
     flex-direction: column;
+    margin: var(--input-container-margin);
   }
 
   .label {

package/dist/InputButton/InputButton.svelte

@@ -21,6 +21,11 @@ function leftButtonClick(event) {
   event.preventDefault();
   dispatch("leftButtonClick");
 }
+function bottomButtonClick() {
+  if (state === "Valid") {
+    dispatch("bottomButtonClick", { value: properties.inputProperties.value });
+  }
+}
 function triggerRightClickIfValid(event) {
   if (event?.key === "Enter") {
     rightButtonClick();
@@ -65,6 +70,11 @@ function handleState(event) {
       </div>
     {/if}
   </div>
+  {#if properties.bottomButtonProperties != null}
+    <div class="bottom-button">
+      <Button properties={properties.bottomButtonProperties} on:click={bottomButtonClick} />
+    </div>
+  {/if}
 </div>
 {#if properties.inputProperties.message.onError !== '' && state === 'Invalid'}
   <div class="error-message">
@@ -110,6 +120,20 @@ function handleState(event) {
     --button-height: 54px;
   }
 
+  .bottom-button {
+    padding: var(--input-bottom-btn-padding, 10px 0px);
+    --cursor: var(--bottom-button-cursor);
+    --button-color: var(--bottom-button-color);
+    --button-text-color: var(--bottom-button-text-color);
+    --button-font-family: var(--bottom-button-font-family);
+    --button-font-weight: var(--bottom-button-font-weight);
+    --button-font-size: var(--bottom-button-font-size);
+    --button-height: var(--bottom-button-height, 54px);
+    --button-padding: var(--bottom-button-padding);
+    --button-border-radius: var(--bottom-button-border-radius);
+    --button-width: var(--bottom-button-width);
+  }
+
   .label {
     font-weight: var(--input-label-msg-text-weight, 400);
     font-size: var(--input-label-msg-text-size, 12px);

package/dist/InputButton/InputButton.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         input: CustomEvent<any>;
         rightButtonClick: CustomEvent<any>;
         leftButtonClick: CustomEvent<any>;
+        bottomButtonClick: CustomEvent<any>;
         stateChange: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/InputButton/properties.d.ts

@@ -4,5 +4,6 @@ export type InputButtonProperties = {
     inputProperties: InputProperties;
     rightButtonProperties: ButtonProperties | null;
     leftButtonProperties: ButtonProperties | null;
+    bottomButtonProperties: ButtonProperties | null;
 };
 export declare const defaultInputButtonProperties: InputButtonProperties;

package/dist/InputButton/properties.js

@@ -13,5 +13,6 @@ const rightButtonProperties = {
 export const defaultInputButtonProperties = {
     inputProperties,
     rightButtonProperties,
-    leftButtonProperties: null
+    leftButtonProperties: null,
+    bottomButtonProperties: null
 };

package/dist/Select/Select.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
 import Img from "../Img/Img.svelte";
 import Button from "../Button/Button.svelte";
+import { InputButton, defaultInputButtonProperties } from "..";
 let selectedElementDiv = null;
 export let dropDownIconAlt = "";
 export let properties = {
@@ -36,14 +37,22 @@ const clearAllButtonProps = {
   type: "submit"
 };
 let isSelectOpen = false;
+let isInput = false;
 const dispatch = createEventDispatcher();
 $:
   nonSelectedItems = properties.allItems.filter(
     (item) => properties.selectMultipleItems ? !properties.selectedItem.includes(item) : item !== properties.selectedItem
   );
+function isSelected(selectedItem, item) {
+  if (Array.isArray(selectedItem)) {
+    return selectedItem.includes(item);
+  } else {
+    return selectedItem.trim() === item.trim();
+  }
+}
 function selectItem(item) {
   if (properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)) {
-    if (properties.selectedItem.includes(item)) {
+    if (isSelected(properties.selectedItem, item)) {
       properties.selectedItem = properties.selectedItem.filter(
         (selectedItem) => selectedItem !== item
       );
@@ -56,6 +65,7 @@ function selectItem(item) {
     }
   } else {
     properties.selectedItem = [item];
+    properties.selectedItemLabel = [item];
   }
   if (!properties.selectMultipleItems) {
     toggleSelect();
@@ -84,11 +94,24 @@ function closeSelect(event) {
     const isApplyButtonClicked = clickedElement.classList.contains("apply-btn");
     const isClearAllButtonClicked = clickedElement.innerText === "Clear All";
     const isSelectAllButtonClicked = clickedElement.innerText === "Select All";
-    if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked) {
+    const isInputSelected = properties.addInputButton && isInput;
+    if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked && isInputSelected) {
       isSelectOpen = false;
     }
   }
 }
+function handleSelectInput(event) {
+  if (event && event.detail) {
+    properties.selectedItem = event.detail.value;
+    properties.selectedItemLabel = event.detail.value;
+  }
+  dispatch("selectInput", event.detail.value);
+  isInput = false;
+  isSelectOpen = false;
+}
+function toggleIsInput() {
+  isInput = true;
+}
 onMount(() => {
   document.addEventListener("click", closeSelect);
 });
@@ -139,7 +162,7 @@ onDestroy(() => {
       {#if !properties.hideDropDownIcon}
         <img
           src={dropDownIcon}
-          alt= {dropDownIconAlt}
+          alt={dropDownIconAlt}
           class="arrow {isSelectOpen ? 'active' : ''}"
         />
       {/if}
@@ -162,7 +185,7 @@ onDestroy(() => {
             on:click={() => {
               selectItem(item);
             }}
-            class="item {properties.selectedItem.includes(item) ? 'selected item-selected' : ''}"
+            class="item {isSelected(properties.selectedItem, item) ? 'selected item-selected' : ''}"
             role="button"
             tabindex="0"
           >
@@ -170,6 +193,11 @@ onDestroy(() => {
           </div>
         {/each}
       </div>
+      {#if properties.addInputButton && properties.addInputButtonProps}
+        <div class="input-button">
+          <InputButton properties = {{...defaultInputButtonProperties, rightButtonProperties: null, bottomButtonProperties: properties.addInputButtonProps}} on:input={toggleIsInput} on:bottomButtonClick={handleSelectInput}/>
+        </div>
+      {/if}
     </div>
   </div>
 {/if}
@@ -196,6 +224,7 @@ onDestroy(() => {
     color: var(--select-color);
     --button-margin: 1px;
     --button-border-radius: 2px;
+    --input-button-margin: 10px;
   }
 
   .select:hover {
@@ -252,6 +281,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/Select.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         message: CustomEvent<any>;
         dropdownClick: CustomEvent<any>;
+        selectInput: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/Select/properties.d.ts

@@ -1,4 +1,5 @@
-import type { ImgProps } from "../Img/properties";
+import type { ButtonProperties } from '../Button/properties';
+import type { ImgProps } from '../Img/properties';
 export type SelectProperties = {
     placeholder: string;
     label: string;
@@ -10,4 +11,6 @@ export type SelectProperties = {
     hideDropDownIcon?: boolean;
     dropDownIcon?: string;
     leftIcon: ImgProps | null;
+    addInputButton?: boolean;
+    addInputButtonProps?: ButtonProperties;
 };

package/dist/Toast/Toast.svelte

@@ -0,0 +1,164 @@
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import { fly } from "svelte/transition";
+import { defaultToastProperties } from "./properties";
+export let properties = defaultToastProperties;
+const dispatch = createEventDispatcher();
+const animationConfig = getAnimationConfig(
+  properties.direction,
+  properties.overlapPage ?? true
+);
+let showToast = false;
+let timeoutId = null;
+function hideToast() {
+  showToast = false;
+}
+function handleAnimationEnd() {
+  dispatch("onToastHide");
+}
+function getAnimationConfig(toastDirection = null, overlapPage) {
+  let inX = 0;
+  let inY = 0;
+  let outX = 0;
+  let outY = 0;
+  switch (toastDirection) {
+    case "left-to-right":
+      inX = -1 * (properties.inAnimationOffset ?? 500);
+      outX = -1 * (properties.outAnimationOffset ?? 500);
+      break;
+    case "right-to-left":
+      inX = properties.inAnimationOffset ?? 500;
+      outX = properties.outAnimationOffset ?? 500;
+      break;
+    case "bottom-to-top":
+      inY = properties.inAnimationOffset ?? (overlapPage ? 500 : 20);
+      outY = properties.outAnimationOffset ?? (overlapPage ? 500 : 20);
+      break;
+    case "top-to-bottom":
+    default:
+      inY = -1 * (properties.inAnimationOffset ?? (overlapPage ? 500 : 20));
+      outY = -1 * (properties.outAnimationOffset ?? (overlapPage ? 100 : 20));
+      break;
+  }
+  return {
+    in: {
+      x: inX,
+      y: inY,
+      duration: properties.inAnimationDuration ?? 400
+    },
+    out: {
+      x: outX,
+      y: outY,
+      duration: properties.outAnimationDuration ?? 800
+    }
+  };
+}
+onMount(() => {
+  showToast = true;
+  timeoutId = setTimeout(hideToast, properties.duration);
+});
+onDestroy(() => {
+  if (timeoutId !== null) {
+    clearTimeout(timeoutId);
+  }
+});
+</script>
+
+{#if showToast}
+  <div
+    class="toast {properties.type ?? ''}"
+    class:no-page-overlap={!(properties?.overlapPage ?? true)}
+    in:fly={animationConfig.in}
+    out:fly={animationConfig.out}
+    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);
+    top: var(--toast-top, 10px);
+    left: var(--toast-left, 0);
+    right: var(--toast-right, 0);
+    background-color: var(--default-background-color, #87ceeb);
+  }
+
+  .no-page-overlap {
+    position: var(--toast-position, relative);
+  }
+
+  .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,16 @@
+export type ToastType = 'success' | 'error' | 'info' | 'warn';
+export type ToastDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
+export type ToastProperties = {
+    duration: number;
+    leftIcon?: string;
+    message: string;
+    rightIcon?: string;
+    type?: ToastType;
+    direction?: ToastDirection;
+    overlapPage?: boolean;
+    inAnimationOffset?: number;
+    inAnimationDuration?: number;
+    outAnimationOffset?: number;
+    outAnimationDuration?: number;
+};
+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';
@@ -29,6 +30,7 @@ export type { InputDataType } from './types';
 export type { AutoCompleteType } from './types';
 export type { CustomValidator } from './types';
 export type { ValidationState } from './types';
+export type { FlyAnimationConfig } from './types';
 export type { IconProperties } from './Icon/properties';
 export type { BrandLoaderProperties } from './BrandLoader/properties';
 export type { StatusProperties } from './Status/properties';
@@ -39,6 +41,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 +52,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/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { FlyParams } from 'svelte/transition';
 /**
  * @name InputDataType
  * @description Different types of input data which can be passed to the Input Component
@@ -18,3 +19,10 @@ export type TextTransformer = (text: string) => string;
  * @description Type Map for All possible output of an Input Filed Validation
  */
 export type ValidationState = 'Valid' | 'InProgress' | 'Invalid';
+/**
+ * @description Type for animation configuration
+ */
+export type FlyAnimationConfig = {
+    in: FlyParams;
+    out: FlyParams;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",