@juspay/svelte-ui-components 1.8.0 → 1.10.0

package/dist/Button/Button.svelte

@@ -27,13 +27,13 @@ function handleButtonClick() {
     disabled={!(properties.enable && !properties.showLoader)}
     type={properties.type}
   >
-    {#if properties.showLoader && properties.loaderType === 'Circular'}
-      <Loader />
+      {#if properties.showLoader && properties.loaderType === 'Circular'}
+        <div class="button-loader"><Loader /></div>
+      {/if}
+      {#if $$slots.icon}
+      <div class="button-icon"><slot name="icon" /></div>
     {/if}
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-    {properties.text}
+    <div class="button-text">{properties.text}</div>
   </button>
 </div>
 
@@ -61,11 +61,23 @@ function handleButtonClick() {
     display: flex;
     justify-content: var(--button-justify-content, center);
     align-items: center;
-    flex-direction: row;
+    flex-direction: var(--button-content-flex-direction, row);;
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
   }
 
+  .button-loader {
+    order: var(--button-loader-order, 1);
+  }
+
+  .button-icon {
+    order: var(--button-icon-order, 2);
+  }
+
+  .button-text {
+    order: var(--button-text-order, 3);
+  }
+
   button:hover {
     background: var(--button-hover-color, var(--button-color, #3a4550));
     color: var(--button-hover-text-color, var(--button-text-color, white));

package/dist/InputButton/InputButton.svelte

@@ -37,6 +37,9 @@ function handleState(event) {
   }
   dispatch("stateChange", event);
 }
+function onFocusOut(event) {
+  dispatch("focusout", event);
+}
 </script>
 
 {#if properties.inputProperties.label && properties.inputProperties.label !== ''}
@@ -60,12 +63,13 @@ function handleState(event) {
         on:keyup={triggerRightClickIfValid}
         on:stateChange={handleState}
         on:input={(event) => dispatch('input', event)}
+        on:focusout={onFocusOut}
         on:focus
         --input-width="auto"
       />
     </div>
     {#if properties.rightButtonProperties != null}
-      <div class="button">
+      <div class="right-button">
         <Button properties={properties.rightButtonProperties} on:click={rightButtonClick} />
       </div>
     {/if}
@@ -97,6 +101,7 @@ function handleState(event) {
     --button-width: 100%;
     --input-border: none;
     --input-focus-border: none;
+    border: var(--input-button-container-border);
   }
 
   .input-button {
@@ -114,12 +119,6 @@ function handleState(event) {
     min-width: 0px;
   }
 
-  .button {
-    flex: 1;
-    min-width: 0px;
-    --button-height: 54px;
-  }
-
   .bottom-button {
     padding: var(--input-bottom-btn-padding, 10px 0px);
     --cursor: var(--bottom-button-cursor);
@@ -177,5 +176,30 @@ function handleState(event) {
     align-items: center;
     flex-direction: row;
     --button-content-gap: var(--left-button-content-gap);
+    --button-content-flex-direction: var(--left-button-content-flex-direction, row);
+  }
+  
+  .right-button {
+    flex: var(--right-button-flex, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    min-width: var(--right-button-min-width, 0px);
+    --button-color: var(--right-button-color);
+    --button-text-color: var(--right-button-text-color);
+    --button-font-family: var(--right-button-font-family);
+    --button-font-weight: var(--right-button-font-weight);
+    --button-font-size: var(--right-button-font-size);
+    --button-height: var(--right-button-height, 54px);
+    --button-padding: var(--right-button-padding);
+    --button-border-radius: var(--right-button-border-radius);
+    --button-width: var(--right-button-width, 100%);
+    --cursor: var(--right-button-cursor);
+    --opacity: var(--right-button-opacity);
+    --button-border: var(--right-button-border);
+    --button-content-gap: var(--right-button-content-gap);
+    --button-visibility: var(--right-button-visibility, visible);
+    --button-content-flex-direction: var(--right-button-content-flex-direction, row);
   }
 </style>

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

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

package/dist/InputButton/properties.d.ts

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

package/dist/Modal/Modal.svelte

@@ -154,14 +154,17 @@ onDestroy(() => {
 
   .small {
     height: var(--modal-small-height, 20vh);
+    width: var(--modal-small-width);
   }
 
   .medium {
     height: var(--modal-medium-height, 50vh);
+    width: var(--modal-medium-width);
   }
 
   .large {
     height: var(--modal-large-height, 80vh);
+    width: var(--modal-large-width);
   }
 
   .fit-content {

package/dist/Select/Select.svelte

@@ -1,7 +1,6 @@
 <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 = {
@@ -12,16 +11,19 @@ export let properties = {
   selectedItemLabel: null,
   showSelectedItemInDropdown: false,
   selectMultipleItems: false,
-  leftIcon: null
+  leftIcon: null,
+  showSelectedItem: true
 };
 const dropDownIcon = properties.dropDownIcon ?? "https://sdk.breeze.in/gallery/icons/down-arrow.svg";
-const applyButtonProps = {
-  text: "Apply",
-  enable: true,
-  showLoader: false,
-  loaderType: null,
-  type: "submit"
-};
+let applyButtonProps;
+$:
+  applyButtonProps = {
+    text: `Select (${properties.selectedItem.length})`,
+    enable: properties.selectedItem.length > 0,
+    showLoader: false,
+    loaderType: null,
+    type: "submit"
+  };
 const selectAllButtonProps = {
   text: "Select All",
   enable: true,
@@ -37,7 +39,6 @@ const clearAllButtonProps = {
   type: "submit"
 };
 let isSelectOpen = false;
-let isInput = false;
 const dispatch = createEventDispatcher();
 $:
   nonSelectedItems = properties.allItems.filter(
@@ -74,6 +75,7 @@ function selectItem(item) {
 }
 function dispatchEvent() {
   dispatch("message", { selectedItems: properties.selectedItem });
+  isSelectOpen = false;
 }
 function toggleSelect() {
   isSelectOpen = !isSelectOpen;
@@ -94,24 +96,11 @@ function closeSelect(event) {
     const isApplyButtonClicked = clickedElement.classList.contains("apply-btn");
     const isClearAllButtonClicked = clickedElement.innerText === "Clear All";
     const isSelectAllButtonClicked = clickedElement.innerText === "Select All";
-    const isInputSelected = properties.addInputButton && isInput;
-    if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked && isInputSelected) {
+    if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked) {
       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);
 });
@@ -143,21 +132,27 @@ onDestroy(() => {
           <Img {...properties.leftIcon} />
         </div>
       {/if}
-      {#if properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)}
-        {#if properties.selectedItem.length === 0}
+      <div class="selected-content">
+        {#if properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)}
+          {#if properties.selectedItem.length === 0}
+            {properties.placeholder}
+          {:else if properties.selectedItemLabel?.length === 0 || properties.showSelectedItemInDropdown && properties.showSelectedItem !== false}
+            {properties.selectedItem.join(', ')}
+          {:else if properties.showSelectedItem !== false}
+            {properties.selectedItemLabel.join(', ')}
+          {:else}
+            {properties.placeholder}
+          {/if}
+        {:else if properties.selectedItem === ''}
           {properties.placeholder}
-        {:else if properties.selectedItemLabel?.length === 0 || properties.showSelectedItemInDropdown}
-          {properties.selectedItem.join(', ')}
+        {:else if properties.selectedItemLabel === null || properties.selectedItemLabel === '' && properties.showSelectedItem !== false}
+          {properties.selectedItem}
+        {:else if properties.showSelectedItem !== false}
+          {properties.selectedItemLabel}
         {:else}
-          {properties.selectedItemLabel.join(', ')}
+          {properties.placeholder}
         {/if}
-      {:else if properties.selectedItem === ''}
-        {properties.placeholder}
-      {:else if properties.selectedItemLabel === null || properties.selectedItemLabel === ''}
-        {properties.selectedItem}
-      {:else}
-        {properties.selectedItemLabel}
-      {/if}
+      </div>
       <div class="filler" />
       {#if !properties.hideDropDownIcon}
         <img
@@ -171,9 +166,8 @@ onDestroy(() => {
       class="non-selected-items"
       style="--non-selected-display:{isSelectOpen ? 'inline-block' : 'none'};"
     >
-      {#if properties.selectMultipleItems}
+      {#if properties.selectMultipleItems && !properties.showSingleSelectButton}
         <div class="multipleSelect-btn">
-          <Button properties={applyButtonProps} on:click={dispatchEvent} />
           <Button properties={selectAllButtonProps} on:click={selectAllItems} />
           <Button properties={clearAllButtonProps} on:click={clearAllItems} />
         </div>
@@ -185,7 +179,7 @@ onDestroy(() => {
             on:click={() => {
               selectItem(item);
             }}
-            class="item {isSelected(properties.selectedItem, item) ? 'selected item-selected' : ''}"
+            class="item {isSelected(properties.selectedItem, item) ? ' item-selected' : ''}"
             role="button"
             tabindex="0"
           >
@@ -193,9 +187,12 @@ 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}/>
+      {#if $$slots.bottomContent}
+        <slot name="bottomContent" />
+      {/if}
+      {#if properties.selectMultipleItems}
+        <div class="apply-btn-container">
+          <Button properties={applyButtonProps} on:click={dispatchEvent} />
         </div>
       {/if}
     </div>
@@ -214,17 +211,16 @@ onDestroy(() => {
     min-width: var(--select-min-width);
     box-shadow: var(--select-box-shadow, 0px 1px 8px #2f537733);
     -webkit-appearance: none !important; /* For Safari MWeb */
-    outline: none;
-    cursor: pointer;
-    border: var(--select-border);
-    word-break: var(--select-word-break, break-word);
+    outline: var(--select-outline, none);
     resize: none;
-    position: relative;
-    white-space: var(--select-white-space);
-    color: var(--select-color);
-    --button-margin: 1px;
-    --button-border-radius: 2px;
-    --input-button-margin: 10px;
+    cursor: pointer;
+    border: var(--select-border, 1px solid #ccc);
+    position: var(--select-position, relative);
+    color: var(--select-color, #333);
+    display: var(--select-display, inline-block);
+    --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);
   }
 
   .select:hover {
@@ -235,6 +231,8 @@ onDestroy(() => {
     height: var(--dropdown-arrow-icon-height, 16px);
     width: var(--dropdown-arrow-icon-width, 16px);
     transition: transform 0.1s;
+    position: absolute;
+    right: 10px;
   }
 
   .active {
@@ -242,8 +240,11 @@ onDestroy(() => {
   }
 
   .item {
-    padding: var(--item-padding, 8px);
-    border-radius: 4px;
+    padding: var(--item-padding, 8px 16px);
+    background-color: var(--item-background-color, #fff);
+    border-radius: var(--item-border-radius);
+    cursor: pointer;
+    position: relative;
   }
 
   .filler {
@@ -251,15 +252,27 @@ onDestroy(() => {
   }
 
   .item:hover {
-    background-color: var(--non-selected-hover-bg, #00000010);
+    background-color: var(--non-selected-hover-bg, #f0f0f0);
     color: var(--non-selected-hover-color);
   }
 
   .selected {
-    margin: 0px;
     display: flex;
-    justify-content: flex-start;
-    align-items: center;
+    align-items: var(--selected-align-items, center);
+    margin: var(--selected-margin, 0px 0px 0px 0px);
+    justify-content: var(--selected-justify-content, flex-start);
+    background-color: var(--selected-item-background-color, #f9f9f9);
+    white-space: var(--selected-item-white-space, nowrap);
+    overflow: var(--selected-item-overflow, hidden);
+    text-overflow: var(--selected-item-text-overflow, ellipsis);
+    max-width: var(--selected-item-max-widhh, 100%);
+  }
+
+  .selected-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 20px);
   }
 
   .selected:hover {
@@ -272,50 +285,81 @@ onDestroy(() => {
     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);
+    width: var(--non-selected-width, 100%);
     min-width: var(--non-selected-min-width, 100%);
-    position: absolute;
-    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);
+    position: var(--non-selected-items-position, absolute);
+    border-radius: var(--non-selected-items-border-radius, 4px);
+    margin: var(--non-selected-margin, 4px 0px 0px 0px);
     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);
+    z-index: 10;
+    overflow-y: auto;
   }
 
   ::-webkit-scrollbar {
-    width: 0;
+    width: var(--scrollbar-width, 0);
   }
 
   .item-list {
-    max-height: var(--non-selected-max-height, 135px);
+    max-height: var(--non-selected-max-height, 165px);
     overflow-y: auto;
-    position: relative;
   }
 
   .item-selected::after {
     content: var(--selected-option-icon, '✔');
     position: absolute;
     right: 7px;
+    color: var(--item-selected-icon-color);
   }
 
   .label-container {
     font-weight: var(--label-text-weight, 400);
     font-size: var(--label-text-size, 12px);
-    color: var(--label-text-color, #000000);
-    margin-bottom: 4px;
-    display: inline-block;
+    color: var(--label-text-color, #333);
+    margin-bottom: var(--label-container-margin-bottom, 4px);
+    display: var(--label-container-display, inline-block);
   }
 
   .multipleSelect-btn {
     display: flex;
-    width: var(--multipleSelect-btn-width, 100%);
+    width: var(--multipleSelect-btn-width, 99%);
     white-space: var(--multipleSelect-btn-white-space, nowrap);
-    padding: var(--multipleSelect-btn-padding, 2px);
+    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%);
+  }
+
+  .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);
+  }
+
+  .apply-btn-container {
+    padding: var(--apply-btn-container-padding, 5px);
+    border-top: var(--apply-btn-container-border-top, 1px solid #ddd);
+    background-color: var(--apply-btn-container-background-color, #f9f9f9);
+    position: var(--apply-btn-container-position, sticky);
+    width: var(--apply-btn-container-width, 94%);
+    display: var(--apply-btn-display, flex);
+    flex-direction: var(--apply-btn-flex-direction, column);
+    --button-width: var(--apply-btn-width, 100%);
+    --button-padding: var(--apply-btn-padding, 10px);
+    --button-font-size: var(--apply-btn-font-size, 14px);
   }
 
   .icon-container {

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

@@ -9,11 +9,12 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         message: CustomEvent<any>;
         dropdownClick: CustomEvent<any>;
-        selectInput: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        bottomContent: {};
+    };
 };
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;

package/dist/Select/properties.d.ts

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

package/dist/Toggle/Toggle.svelte

@@ -12,9 +12,9 @@ export let toggleText = "";
 
 <style>
   .toggle-container {
-    display: flex;
+    display: var(--toggle-container-display, flex);
     align-items: center;
-    gap: 8px;
+    gap: var(--toggle-containter-gap, 8px);
   }
 
   .toggle-text {
@@ -27,8 +27,8 @@ export let toggleText = "";
   .switch {
     position: relative;
     display: inline-block;
-    width: 46px;
-    height: 25px;
+    width: var(--toggle-switch-width, 46px);
+    height: var(--toggle-switch-height, 25px);
   }
 
   .switch .input-checkbox {
@@ -40,10 +40,10 @@ export let toggleText = "";
   .slider {
     position: absolute;
     cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: var(--toggle-slider-top, 0);
+    left: var(--toggle-slider-left, 0);
+    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;
@@ -52,12 +52,12 @@ export let toggleText = "";
   .slider:before {
     position: absolute;
     content: '';
-    height: 23px;
-    width: 23px;
-    left: 2px;
-    bottom: 1px;
-    top: 1px;
-    background-color: white;
+    height: var(--toggle-slider-before-height, 23px);
+    width: var(--toggle-slider-before-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;
   }
@@ -77,10 +77,10 @@ export let toggleText = "";
   }
 
   .slider.round {
-    border-radius: 23px;
+    border-radius: var(--slider-round-border-radius, 23px);
   }
 
   .slider.round:before {
-    border-radius: 50%;
+    border-radius: var(--slider-round-before-border-radius, 50%);
   }
 </style>

package/package.json

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