@juspay/svelte-ui-components 1.17.0 → 1.19.0

package/dist/Button/Button.svelte

@@ -66,6 +66,7 @@ function handleButtonClick() {
     flex-direction: var(--button-content-flex-direction, row);
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
+    box-shadow: var(--button-box-shadow, none);
   }
 
   .button-loader {

package/dist/Modal/Modal.svelte

@@ -3,6 +3,7 @@ import ModalAnimation from "../Animations/ModalAnimation.svelte";
 import OverlayAnimation from "../Animations/OverlayAnimation.svelte";
 import { defaultModalProperties } from "./properties";
 import { createDebouncer } from "../utils";
+import Button from "../Button/Button.svelte";
 const dispatch = createEventDispatcher();
 let overlayDiv;
 let backPressed = false;
@@ -18,6 +19,12 @@ function handleRightImageClick() {
 function handleLeftImageClick() {
   dispatch("headerLeftImageClick");
 }
+function handlePrimaryButtonClick() {
+  dispatch("primaryButtonClick");
+}
+function handleSecondaryButtonClick() {
+  dispatch("secondaryButtonClick");
+}
 function handleOverlayClick(event) {
   if (event.target && event.target === overlayDiv) {
     debounce(() => {
@@ -93,6 +100,32 @@ onDestroy(() => {
           <div class="slot-content">
             <slot name="content" />
           </div>
+          {#if $$slots.footer}
+            <div class="footer-content">
+              <slot name="footer" />
+            </div>
+          {:else if properties.footer?.primaryButton || properties.footer?.secondaryButton}
+            <div class="footer-content">
+              <div class="footer-action-buttons">
+                {#if properties.footer.secondaryButton}
+                  <div class="footer-secondary-button">
+                    <Button
+                      properties={properties.footer.secondaryButton}
+                      on:click={handleSecondaryButtonClick}
+                    />
+                  </div>
+                {/if}
+                {#if properties.footer.primaryButton}
+                  <div class="footer-primary-button">
+                    <Button
+                      properties={properties.footer.primaryButton}
+                      on:click={handlePrimaryButtonClick}
+                    />
+                  </div>
+                {/if}
+              </div>
+            </div>
+          {/if}
         </div>
       </ModalAnimation>
     </div>
@@ -131,6 +164,7 @@ onDestroy(() => {
     display: flex;
     flex-direction: column;
     border-radius: var(--modal-border-radius, 0px);
+    overflow: var(--modal-content-overflow, auto);
   }
 
   .slot-content {
@@ -181,6 +215,75 @@ onDestroy(() => {
     background-color: var(--modal-header-background-color, #f6f7f9);
     padding: var(--modal-header-padding, 18px 20px);
     border-radius: var(--modal-header-border-radius, 0px);
+    border-bottom: var(--modal-header-border-bottom, none);
+  }
+
+  .footer-content {
+    display: flex;
+    background-color: var(--modal-footer-background-color, #f6f7f9);
+    padding: var(--modal-footer-padding, 18px 20px);
+    border-radius: var(--modal-footer-border-radius, 0px);
+    border-top: var(--modal-footer-border-top, none);
+    justify-content: var(--modal-footer-justify-content, none);
+  }
+
+  .footer-action-buttons {
+    display: flex;
+    gap: var(--modal-footer-gap, 0px);
+    width: var(--modal-footer-action-buttons-width, auto);
+  }
+
+  .footer-secondary-button {
+    --button-max-height: var(--modal-footer-secondary-button-max-height);
+    --button-max-width: var(--modal-footer-secondary-button-max-width);
+    --button-font-family: var(--modal-footer-secondary-button-font-family);
+    --button-font-weight: var(--modal-footer-secondary-button-font-weight, 500);
+    --button-font-size: var(--modal-footer-secondary-button-font-size, 14px);
+    --button-color: var(--modal-footer-secondary-button-color, #3a4550);
+    --button-text-color: var(--modal-footer-secondary-button-text-color, white);
+    --button-height: var(--modal-footer-secondary-button-height, fit-content);
+    --button-padding: var(--modal-footer-secondary-button-padding, 16px);
+    --button-margin: var(--modal-footer-secondary-button-margin);
+    --button-border-radius: var(--modal-footer-secondary-button-border-radius, 0px);
+    --button-width: var(--modal-footer-secondary-button-width, fit-content);
+    --cursor: var(--modal-footer-secondary-button-cursor, pointer);
+    --opacity: var(--modal-footer-secondary-button-opacity, 1);
+    --button-border: var(--modal-footer-secondary-button-border, none);
+    --button-justify-content: var(--modal-footer-secondary-button-justify-content, center);
+    --button-content-flex-direction: var(
+      --modal-footer-secondary-button-content-flex-direction,
+      row
+    );
+    --button-content-gap: var(--modal-footer-secondary-button-content-gap, 16px);
+    --button-visibility: var(--modal-footer-secondary-button-visibility, visible);
+    --button-box-shadow: var(--modal-footer-secondary-button-box-shadow, none);
+    order: var(--modal-secondary-button-order, none);
+    flex: var(--modal-footer-secondary-button-flex-value, none);
+  }
+
+  .footer-primary-button {
+    --button-max-height: var(--modal-footer-primary-button-max-height);
+    --button-max-width: var(--modal-footer-primary-button-max-width);
+    --button-font-family: var(--modal-footer-primary-button-font-family);
+    --button-font-weight: var(--modal-footer-primary-button-font-weight, 500);
+    --button-font-size: var(--modal-footer-primary-button-font-size, 14px);
+    --button-color: var(--modal-footer-primary-button-color, #3a4550);
+    --button-text-color: var(--modal-footer-primary-button-text-color, white);
+    --button-height: var(--modal-footer-primary-button-height, fit-content);
+    --button-padding: var(--modal-footer-primary-button-padding, 16px);
+    --button-margin: var(--modal-footer-primary-button-margin);
+    --button-border-radius: var(--modal-footer-primary-button-border-radius, 0px);
+    --button-width: var(--modal-footer-primary-button-width, fit-content);
+    --cursor: var(--modal-footer-primary-button-cursor, pointer);
+    --opacity: var(--modal-footer-primary-button-opacity, 1);
+    --button-border: var(--modal-footer-primary-button-border, none);
+    --button-justify-content: var(--modal-footer-primary-button-justify-content, center);
+    --button-content-flex-direction: var(--modal-footer-primary-button-content-flex-direction, row);
+    --button-content-gap: var(--modal-footer-primary-button-content-gap, 16px);
+    --button-visibility: var(--modal-footer-primary-button-visibility, visible);
+    --button-box-shadow: var(--modal-footer-primary-button-box-shadow, none);
+    order: var(--modal-primary-button-order, none);
+    flex: var(--modal-footer-primary-button-flex-value, none);
   }
 
   .header-text {

package/dist/Modal/Modal.svelte.d.ts

@@ -9,12 +9,15 @@ declare const __propDef: {
         close: CustomEvent<any>;
         headerRightImageClick: CustomEvent<any>;
         headerLeftImageClick: CustomEvent<any>;
+        primaryButtonClick: CustomEvent<any>;
+        secondaryButtonClick: CustomEvent<any>;
         overlayClick: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         content: {};
+        footer: {};
     };
 };
 export type ModalProps = typeof __propDef.props;

package/dist/Modal/properties.d.ts

@@ -1,3 +1,4 @@
+import type { ButtonProperties } from '../Button/properties';
 import type { ModalTransition } from '../types';
 export type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
 export type ModalAlign = 'top' | 'center' | 'bottom';
@@ -13,6 +14,10 @@ export type ModalProperties = {
         rightImage: string | null;
         text: string | null;
     };
+    footer?: {
+        primaryButton?: ButtonProperties;
+        secondaryButton?: ButtonProperties;
+    };
     debounceTime: number;
 };
 export declare const defaultModalProperties: ModalProperties;

package/dist/Modal/properties.js

@@ -10,5 +10,5 @@ export const defaultModalProperties = {
     },
     enableTransition: true,
     transitionType: 'ALL',
-    debounceTime: 700,
+    debounceTime: 700
 };

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 CheckListItem from "../CheckListItem/CheckListItem.svelte";
 let selectedElementDiv = null;
 export let dropDownIconAlt = "";
 export let properties = {
@@ -12,7 +13,8 @@ export let properties = {
   showSelectedItemInDropdown: false,
   selectMultipleItems: false,
   leftIcon: null,
-  showSelectedItem: true
+  showSelectedItem: true,
+  showSelectedItemCount: false
 };
 const dropDownIcon = properties.dropDownIcon ?? "https://sdk.breeze.in/gallery/icons/down-arrow.svg";
 let applyButtonProps;
@@ -31,13 +33,6 @@ const selectAllButtonProps = {
   loaderType: null,
   type: "submit"
 };
-const clearAllButtonProps = {
-  text: "Clear All",
-  enable: true,
-  showLoader: false,
-  loaderType: null,
-  type: "submit"
-};
 let isSelectOpen = false;
 const dispatch = createEventDispatcher();
 $:
@@ -81,13 +76,14 @@ function toggleSelect() {
   isSelectOpen = !isSelectOpen;
   dispatch("dropdownClick");
 }
-function clearAllItems() {
-  properties.selectedItem = [];
-  properties.selectedItemLabel = [];
-}
 function selectAllItems() {
-  properties.selectedItem = [...properties.allItems];
-  properties.selectedItemLabel = [...properties.allItems];
+  if (properties.selectedItem.length === properties.allItems.length) {
+    properties.selectedItem = [];
+    properties.selectedItemLabel = [];
+  } else {
+    properties.selectedItem = [...properties.allItems];
+    properties.selectedItemLabel = [...properties.allItems];
+  }
 }
 function closeSelect(event) {
   const clickedElement = event.target;
@@ -96,7 +92,8 @@ 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 isCheckListClicked = clickedElement.classList.contains("checkbox");
+    if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked && !isCheckListClicked) {
       isSelectOpen = false;
     }
   }
@@ -154,6 +151,11 @@ onDestroy(() => {
         {/if}
       </div>
       <div class="filler" />
+      {#if properties.showSelectedItemCount && properties.selectMultipleItems && Array.isArray(properties.selectedItem)}
+        <div class="selected-item-count">
+          {properties.selectedItem.length}
+        </div>
+      {/if}
       {#if !properties.hideDropDownIcon}
         <img
           src={dropDownIcon}
@@ -167,9 +169,14 @@ onDestroy(() => {
       style="--non-selected-display:{isSelectOpen ? 'inline-block' : 'none'};"
     >
       {#if properties.selectMultipleItems && !properties.showSingleSelectButton}
-        <div class="multipleSelect-btn">
+        <div class="select-all-btn">
+          <CheckListItem
+            checked={Array.isArray(properties.selectedItem) &&
+              properties.selectedItem.length === properties.allItems.length}
+            text=""
+            on:click={selectAllItems}
+          />
           <Button properties={selectAllButtonProps} on:click={selectAllItems} />
-          <Button properties={clearAllButtonProps} on:click={clearAllItems} />
         </div>
       {/if}
       <div class="item-list">
@@ -183,6 +190,9 @@ onDestroy(() => {
             role="button"
             tabindex="0"
           >
+            {#if properties.selectMultipleItems}
+              <CheckListItem checked={isSelected(properties.selectedItem, item)} text="" />
+            {/if}
             {item}
           </div>
         {/each}
@@ -221,6 +231,13 @@ onDestroy(() => {
     --button-margin: var(--select-btn-margin, 1px);
     --button-border-radius: var(--select-btn-border-radius, 2px);
     --input-button-margin: var(--select-input-button-margin, 10px);
+    --check-list-item-margin: var(--select-check-list-item-margin, 0px);
+    --checkbox-margin: var(--select-checkbox-margin, 2px 8px 0px 0px);
+    --checkbox-height: var(--select-checkbox-height, 14px);
+    --checkbox-width: var(--select-checkbox-width, 14px);
+    --checkbox-accent-color: var(--select-checkbox-accent-color, #3a4550);
+    --check-list-item-checked-font-weight: var(--select-check-list-item-checked-font-weight, bold);
+    --check-list-item-width: var(--select-check-list-item-width, fit-content);
   }
 
   .select:hover {
@@ -243,6 +260,7 @@ onDestroy(() => {
     border-radius: var(--item-border-radius);
     cursor: pointer;
     position: relative;
+    display: flex;
   }
 
   .filler {
@@ -323,14 +341,17 @@ onDestroy(() => {
     display: var(--label-container-display, inline-block);
   }
 
-  .multipleSelect-btn {
+  .select-all-btn {
     display: flex;
-    width: var(--multipleSelect-btn-width, 99%);
-    white-space: var(--multipleSelect-btn-white-space, nowrap);
-    padding: var(--multipleSelect-btn-padding, 1px);
-    --button-border: var(--multipleSelect-btn-border, 1px solid white);
-    --button-font-size: var(--multipleSelect-btn-font-size, 12px);
-    --button-width: var(--multipleSelect-btn-width, 100%);
+    width: var(--select-all-btn-width, 99%);
+    white-space: var(--select-all-btn-white-space, nowrap);
+    padding: var(--select-all-btn-padding, 10px 16px);
+    --button-font-size: var(--select-all-btn-font-size, 14px);
+    --button-width: var(--select-all-btn-width, 100%);
+    --button-color: var(--select-all-btn-color, #ffffff);
+    --button-text-color: var(--select-all-btn-text-color, #333);
+    --button-padding: var(--select-all-btn-inner-padding, 0px);
+    --button-justify-content: var(--select-all-btn-justify-content, flex-start);
   }
 
   .apply-btn-container {
@@ -360,4 +381,18 @@ onDestroy(() => {
     --image-height: var(--select-icon-height);
     --image-width: var(--select-icon-height);
   }
+
+  .selected-item-count {
+    margin: var(--selected-item-count-margin, 0px 6px);
+    height: var(--selected-item-count-height, 18px);
+    width: var(--selected-item-count-width, 18px);
+    min-width: var(--selected-item-count-min-width, 18px);
+    padding: var(--selected-item-count-padding, 4px);
+    display: var(--selected-item-count-display, flex);
+    justify-content: var(--selected-item-count-justify-content, center);
+    align-items: var(--selected-item-count-align-item, center);
+    background-color: var(--selected-item-count-bg-color, #3a4550);
+    color: var(--selected-item-count-text-color, #ffffff);
+    border-radius: var(--selected-item-count-border-radius, 4px);
+  }
 </style>

package/dist/Select/properties.d.ts

@@ -12,4 +12,5 @@ export type SelectProperties = {
     leftIcon: ImgProps | null;
     showSingleSelectButton?: boolean | null;
     showSelectedItem?: boolean;
+    showSelectedItemCount?: boolean;
 };

package/dist/Toggle/Toggle.svelte

@@ -1,27 +1,28 @@
-<script>export let toggleValue = false;
-export let toggleText = "";
+<script>export let value = false;
+export let text = "";
 </script>
 
-<div class="toggle-container">
-  <div class="toggle-text">{toggleText}</div>
+<div class="container">
+  <div class="text" hidden={text.length === 0}>{text}</div>
   <label class="switch">
-    <input class="input-checkbox" type="checkbox" bind:checked={toggleValue} />
+    <input class="input-checkbox" type="checkbox" bind:checked={value} />
     <span class="slider round" />
   </label>
 </div>
 
 <style>
-  .toggle-container {
+  .container {
     display: var(--toggle-container-display, flex);
-    align-items: center;
-    gap: var(--toggle-containter-gap, 8px);
+    align-items: var(--toggle-container-align-items, center);
+    gap: var(--toggle-container-gap, 8px);
   }
 
-  .toggle-text {
-    font-size: 14px;
-    font-weight: 500;
-    color: #4a4a4a;
-    margin-right: 8px;
+  .text {
+    font-size: var(--toggle-text-font-size, 14px);
+    font-weight: var(--toggle-text-font-weight, 400);
+    color: var(--toggle-text-color, #4a4a4a);
+    margin: var(--toggle-text-margin, 0px 8px 0px 0px);
+    order: var(--toggle-text-order, 0);
   }
 
   .switch {
@@ -45,21 +46,21 @@ export let toggleText = "";
     right: var(--toggle-slider-right, 0);
     bottom: var(--toggle-slider-bottom, 0);
     background-color: var(--slider-unchecked-color, #ccc);
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
+    -webkit-transition: var(--toggle-slider-transition, 0.4s);
+    transition: var(--toggle-slider-transition, 0.4s);
   }
 
   .slider:before {
     position: absolute;
     content: '';
-    height: var(--toggle-slider-before-height, 23px);
-    width: var(--toggle-slider-before-width, 23px);
+    height: var(--toggle-ball-height, 23px);
+    width: var(--toggle-ball-width, 23px);
     left: var(--toggle-slider-before-left, 2px);
     bottom: var(--toggle-slider-before-bottom, 1px);
     top: var(--toggle-slider-before-top, 1px);
     background-color: var(--toggle-slider-before-background-color, white);
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
+    -webkit-transition: var(--toggle-slider-transition, 0.4s);
+    transition: var(--toggle-slider-transition, 0.4s);
   }
 
   .input-checkbox:checked + .slider {
@@ -77,10 +78,10 @@ export let toggleText = "";
   }
 
   .slider.round {
-    border-radius: var(--slider-round-border-radius, 23px);
+    border-radius: var(--slider-border-radius, 23px);
   }
 
   .slider.round:before {
-    border-radius: var(--slider-round-before-border-radius, 50%);
+    border-radius: var(--slider-border-radius-before, 50%);
   }
 </style>

package/dist/Toggle/Toggle.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        toggleValue?: boolean | undefined;
-        toggleText?: string | undefined;
+        value?: boolean | undefined;
+        text?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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