@juspay/svelte-ui-components 1.9.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

@@ -69,7 +69,7 @@ function onFocusOut(event) {
       />
     </div>
     {#if properties.rightButtonProperties != null}
-      <div class="button">
+      <div class="right-button">
         <Button properties={properties.rightButtonProperties} on:click={rightButtonClick} />
       </div>
     {/if}
@@ -119,12 +119,6 @@ function onFocusOut(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);
@@ -182,5 +176,30 @@ function onFocusOut(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/Select/Select.svelte

@@ -11,7 +11,8 @@ 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";
 let applyButtonProps;
@@ -135,17 +136,21 @@ onDestroy(() => {
         {#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}
+          {:else if properties.selectedItemLabel?.length === 0 || properties.showSelectedItemInDropdown && properties.showSelectedItem !== false}
             {properties.selectedItem.join(', ')}
-          {:else}
+          {:else if properties.showSelectedItem !== false}
             {properties.selectedItemLabel.join(', ')}
+          {:else}
+            {properties.placeholder}
           {/if}
         {:else if properties.selectedItem === ''}
           {properties.placeholder}
-        {:else if properties.selectedItemLabel === null || properties.selectedItemLabel === ''}
+        {:else if properties.selectedItemLabel === null || properties.selectedItemLabel === '' && properties.showSelectedItem !== false}
           {properties.selectedItem}
-        {:else}
+        {:else if properties.showSelectedItem !== false}
           {properties.selectedItemLabel}
+        {:else}
+          {properties.placeholder}
         {/if}
       </div>
       <div class="filler" />

package/dist/Select/properties.d.ts

@@ -11,4 +11,5 @@ export type SelectProperties = {
     dropDownIcon?: string;
     leftIcon: ImgProps | null;
     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.9.0",
+  "version": "1.10.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",