@juspay/svelte-ui-components 1.4.0 → 1.6.0

package/dist/Badge/Badge.svelte

@@ -39,7 +39,8 @@
     border-radius: var(--badge-img-border-radius, 6px);
     width: var(--badge-img-width, 64px);
     height: var(--badge-img-height, 64px);
-    object-fit: contain;
+    object-fit: var(--badge-object-fit, contain);
     box-shadow: var(--badge-img-icon-shadow, 0 0 0 0.5px #798fa54d);
+    background-color: var(--badge-img-background-color);
   }
 </style>

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/CheckListItem/CheckListItem.svelte

@@ -12,10 +12,14 @@ function handleCheckboxClick(e) {
 
 <div class="container">
   <input type="checkbox" class="checkbox" bind:checked on:click={handleCheckboxClick} />
-  <span class="text">
-    <!-- eslint-disable-next-line -->
-    {@html text}
-  </span>
+  {#if $$slots.checkboxLabel}
+    <slot name="checkboxLabel" />
+  {:else}
+    <span class="text">
+      <!-- eslint-disable-next-line -->
+      {@html text}
+    </span>
+  {/if}
 </div>
 
 <style>
@@ -36,5 +40,9 @@ function handleCheckboxClick(e) {
     border: 5px solid red;
     height: var(--checkbox-height, 24px);
     width: var(--checkbox-width, 24px);
+    margin: var(--checkbox-margin);
+    padding: var(--checkbox-padding);
+    border-radius: var(--checkbox-border-radius);
+    visibility: var(--checkbox-visibility);
   }
 </style>

package/dist/CheckListItem/CheckListItem.svelte.d.ts

@@ -9,7 +9,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        checkboxLabel: {};
+    };
 };
 export type CheckListItemProps = typeof __propDef.props;
 export type CheckListItemEvents = typeof __propDef.events;

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/dist/Stepper/Step.svelte

@@ -0,0 +1,73 @@
+<script>import { createEventDispatcher } from "svelte";
+export let stepIndex;
+export let label;
+export let icon;
+const dispatch = createEventDispatcher();
+function handleStepClick() {
+  dispatch("handleStepClick", { selectedIndex: stepIndex });
+}
+</script>
+
+<div class="step" on:click={handleStepClick} role="button" tabindex="0" on:keydown>
+  {#if icon !== null}
+    <div class="step-icon-container">
+      <img class="step-icon" src={icon} alt="" />
+    </div>
+  {:else}
+    <div class="step-index-container">
+      <div class={'step-index-text'}>
+        {stepIndex}
+      </div>
+    </div>
+  {/if}
+  <div class={'step-text'}>
+    {label}
+  </div>
+  <div class={'separator'} />
+</div>
+
+<style>
+  .step {
+    display: flex;
+    flex-direction: var(--step-flex-direction, row);
+    align-items: center;
+  }
+
+  .step-index-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--step-index-container-height, 30px);
+    width: var(--step-index-container-width, 30px);
+    border-radius: var(--step-index-container-radius, 50%);
+    background-color: var(--step-index-container-background-color, #798fa5cc);
+  }
+
+  .separator {
+    display: var(--separator-display, block);
+    height: var(--separator-height, 1px);
+    width: var(--separator-width, 50px);
+    margin: var(--separator-margin, 0px 12px 0px 12px);
+    background-image: var(
+      --separator-background-image,
+      repeating-linear-gradient(
+        to right,
+        var(--separator-background-image-color, #798fa5cc),
+        var(--separator-background-image-color, #798fa5cc) 6px,
+        transparent 6px,
+        transparent 10px
+      )
+    );
+  }
+
+  .step-text {
+    margin: var(--step-text-margin, 0px 0px 0px 12px);
+    font-size: var(--step-text-font-size, 12px);
+    color: var(--step-text-color, #798fa5cc);
+  }
+
+  .step-index-text {
+    font-size: var(--step-index-font-size, 14px);
+    color: var(--step-index-color, white);
+  }
+</style>

package/dist/Stepper/Step.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        stepIndex: number;
+        label: string;
+        icon: string | null;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        handleStepClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepProps = typeof __propDef.props;
+export type StepEvents = typeof __propDef.events;
+export type StepSlots = typeof __propDef.slots;
+export default class Step extends SvelteComponent<StepProps, StepEvents, StepSlots> {
+}
+export {};

package/dist/Stepper/Stepper.svelte

@@ -0,0 +1,55 @@
+<script>import Step from "./Step.svelte";
+export let properties;
+</script>
+
+<div class="container">
+  {#each properties.steps as currentStep, stepIndex}
+    <div
+      class:active-step={properties.currentStepIndex === stepIndex}
+      class:completed-step={properties.currentStepIndex > stepIndex}
+      class="step-container"
+    >
+      <Step
+        on:handleStepClick
+        label={currentStep.label}
+        icon={currentStep.icon ?? null}
+        stepIndex={stepIndex + 1}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: var(--container-flex-direction, row);
+    align-items: center;
+  }
+
+  .step-container:last-child {
+    --separator-display: none;
+  }
+
+  .step-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .active-step {
+    --step-text-color: var(--step-text-active-color, #2f3841);
+    --separator-background-image-color: var(--separator-background-image-active-color, #2f3841);
+    --step-index-container-background-color: var(
+      --step-index-container-active-background-color,
+      #2f3841
+    );
+  }
+
+  .completed-step {
+    --step-text-color: var(--step-text-completed-color, #24aa5a);
+    --separator-background-image-color: var(--separator-background-image-completed-color, #24aa5a);
+    --step-index-container-background-color: var(
+      --step-index-container-completed-background-color,
+      #24aa5a
+    );
+  }
+</style>

package/dist/Stepper/Stepper.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { StepperProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties: StepperProperties;
+    };
+    events: {
+        handleStepClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepperProps = typeof __propDef.props;
+export type StepperEvents = typeof __propDef.events;
+export type StepperSlots = typeof __propDef.slots;
+export default class Stepper extends SvelteComponent<StepperProps, StepperEvents, StepperSlots> {
+}
+export {};

package/dist/Stepper/properties.d.ts

@@ -0,0 +1,8 @@
+export type StepperProperties = {
+    steps: Array<Step>;
+    currentStepIndex: number;
+};
+export type Step = {
+    label: string;
+    icon?: string;
+};

package/dist/Stepper/properties.js

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

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 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 type { ButtonProperties } from './Button/properties';
 export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
 export type { InputProperties } from './Input/properties';
@@ -36,6 +38,7 @@ export type { CarouselProperties } from './Carousel/properties';
 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 { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/dist/index.js

@@ -18,6 +18,8 @@ export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 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 { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.4.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"
   },