@juspay/svelte-ui-components 1.5.0 → 1.6.0

package/dist/Banner/Banner.svelte

@@ -23,14 +23,14 @@
     position: var(--banner-position, sticky);
     top: var(--banner-top, 0px);
     display: var(--banner-display, flex);
-    align-items: center;
+    align-items: var(--banner-align-items, center);
     background-color: var(--banner-bg-color, #637c9529);
     width: var(--banner-width, 100%);
     height: var(--banner-height, 37px);
     padding: var(--banner-padding, 10px 12px, 10px, 12px);
     gap: var(--banner-gap, 8px);
-    justify-content: center;
-    cursor: pointer;
+    justify-content: var(--banner-justify-content, center);
+    cursor: var(--banner-cursor, pointer);
   }
 
   .banner-image {
@@ -38,7 +38,7 @@
     width: var(--banner-img-width, 18px);
     height: var(--banner-img-height, 11.69px);
     margin-bottom: var(--banner-img-margin-bottom, 6px);
-    align-items: center;
+    align-items: var(--banner-image-align-items, center);
   }
 
   .banner-text {
@@ -49,10 +49,10 @@
     font-size: var(--banner-font-size, 14px);
     line-height: var(--banner-line-height, 17.75px);
     font-weight: var(--banner-font-weight, 500);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    align-items: center;
+    overflow: var(--banner-overflow, hidden);
+    text-overflow: var(--banner-text-overflow, ellipsis);
+    white-space: var(--banner-text-white-space, nowrap);
+    align-items: var(--banner-text-align-items, center);
   }
 
   .link-text {

package/dist/Img/properties.d.ts

@@ -0,0 +1,5 @@
+export type ImgProps = {
+    src: string;
+    alt: string;
+    fallback: string | null;
+};

package/dist/Img/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/ListItem/ListItem.svelte

@@ -175,7 +175,7 @@ function handleTopSectionClick() {
   }
 
   .left-content {
-    display: flex;
+    display: var(--list-item-left-content-display, flex);
     --image-height: var(--list-item-left-image-height, 24px);
     --image-width: var(--list-item-left-image-width, 24px);
     --image-padding: var(--list-item-left-image-padding, 0px);
@@ -218,7 +218,7 @@ function handleTopSectionClick() {
   }
 
   .right-content {
-    display: flex;
+    display: var(--list-item-right-content-display, flex);
   }
 
   .bottom-section {

package/dist/Select/Select.svelte

@@ -1,6 +1,8 @@
 <script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import Img from "../Img/Img.svelte";
 import Button from "../Button/Button.svelte";
 let selectedElementDiv = null;
+export let dropDownIconAlt = "";
 export let properties = {
   placeholder: "",
   label: "",
@@ -8,8 +10,10 @@ export let properties = {
   selectedItem: "",
   selectedItemLabel: null,
   showSelectedItemInDropdown: false,
-  selectMultipleItems: false
+  selectMultipleItems: false,
+  leftIcon: null
 };
+const dropDownIcon = properties.dropDownIcon ?? "https://sdk.breeze.in/gallery/icons/down-arrow.svg";
 const applyButtonProps = {
   text: "Apply",
   enable: true,
@@ -111,6 +115,11 @@ onDestroy(() => {
       role="button"
       tabindex="0"
     >
+      {#if properties.leftIcon !== null}
+        <div class="icon-container">
+          <Img {...properties.leftIcon} />
+        </div>
+      {/if}
       {#if properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)}
         {#if properties.selectedItem.length === 0}
           {properties.placeholder}
@@ -127,11 +136,13 @@ onDestroy(() => {
         {properties.selectedItemLabel}
       {/if}
       <div class="filler" />
-      <img
-        src="https://sdk.breeze.in/gallery/icons/right-arrow.svg"
-        alt=""
-        class="arrow {isSelectOpen ? 'active' : ''}"
-      />
+      {#if !properties.hideDropDownIcon}
+        <img
+          src={dropDownIcon}
+          alt= {dropDownIconAlt}
+          class="arrow {isSelectOpen ? 'active' : ''}"
+        />
+      {/if}
     </div>
     <div
       class="non-selected-items"
@@ -173,7 +184,7 @@ onDestroy(() => {
     font-weight: var(--select-font-weight, 400);
     width: var(--select-width, 100%);
     min-width: var(--select-min-width);
-    box-shadow: 0px 1px 8px #2f537733;
+    box-shadow: var(--select-box-shadow, 0px 1px 8px #2f537733);
     -webkit-appearance: none !important; /* For Safari MWeb */
     outline: none;
     cursor: pointer;
@@ -187,15 +198,18 @@ onDestroy(() => {
     --button-border-radius: 2px;
   }
 
+  .select:hover {
+    background-color: var(--select-hover-bgcolor, #ffffff);
+  }
+
   .arrow {
-    height: 16px;
-    width: 16px;
-    transform: rotate(-0.25turn);
+    height: var(--dropdown-arrow-icon-height, 16px);
+    width: var(--dropdown-arrow-icon-width, 16px);
     transition: transform 0.1s;
   }
 
   .active {
-    transform: rotate(0.25turn);
+    transform: rotate(0.5turn);
   }
 
   .item {
@@ -227,15 +241,17 @@ onDestroy(() => {
   .non-selected-items {
     display: var(--non-selected-display);
     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);
     min-width: var(--non-selected-min-width, 100%);
     position: absolute;
-    border-radius: 4px 4px 4px 4px;
-    margin: 4px 0px 0px 0px;
+    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);
+    font-weight: var(--non-select-font-weight, 500);
   }
 
   ::-webkit-scrollbar {
@@ -249,7 +265,7 @@ onDestroy(() => {
   }
 
   .item-selected::after {
-    content: '✔';
+    content: var(--selected-option-icon, '✔');
     position: absolute;
     right: 7px;
   }
@@ -268,4 +284,19 @@ onDestroy(() => {
     white-space: var(--multipleSelect-btn-white-space, nowrap);
     padding: var(--multipleSelect-btn-padding, 2px);
   }
+
+  .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);
+  }
 </style>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { SelectProperties } from './properties';
 declare const __propDef: {
     props: {
+        dropDownIconAlt?: string | undefined;
         properties?: SelectProperties | undefined;
     };
     events: {

package/dist/Select/properties.d.ts

@@ -1,3 +1,4 @@
+import type { ImgProps } from "../Img/properties";
 export type SelectProperties = {
     placeholder: string;
     label: string;
@@ -6,4 +7,7 @@ export type SelectProperties = {
     selectedItemLabel: string | string[] | null;
     showSelectedItemInDropdown: boolean;
     selectMultipleItems: boolean;
+    hideDropDownIcon?: boolean;
+    dropDownIcon?: string;
+    leftIcon: ImgProps | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -54,7 +54,7 @@
     "svelte-check": "^3.6.0",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.5.2",
+    "vite": "^4.5.3",
     "vitest": "^0.34.6",
     "type-decoder": "^1.2.0"
   },