@juspay/svelte-ui-components 1.34.1 → 2.0.0

package/dist/Select/Select.svelte

@@ -1,166 +1,195 @@
-<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 = {
-  placeholder: "",
-  label: "",
-  allItems: [],
-  selectedItem: "",
-  selectedItemLabel: null,
-  showSelectedItemInDropdown: false,
-  selectMultipleItems: false,
-  leftIcon: null,
-  showSelectedItem: true,
-  showSelectedItemCount: false
-};
-const dropDownIcon = properties.dropDownIcon ?? "https://sdk.breeze.in/gallery/icons/down-arrow.svg";
-let applyButtonProps;
-$:
-  applyButtonProps = {
-    text: `Select (${properties.selectedItem.length})`,
-    enable: properties.selectedItem.length > 0,
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import type { SelectProperties } from './properties';
+  import type { ButtonProperties } from '../Button/properties';
+  import Img from '../Img/Img.svelte';
+  import Button from '../Button/Button.svelte';
+  import CheckListItem from '../CheckListItem/CheckListItem.svelte';
+
+  let selectedElementDiv: HTMLDivElement | null = $state(null);
+
+  let {
+    dropDownIconAlt = '',
+    placeholder = '',
+    label = '',
+    allItems = [],
+    selectedItem = '',
+    selectedItemLabel = null,
+    showSelectedItemInDropdown = false,
+    selectMultipleItems = false,
+    hideDropDownIcon,
+    dropDownIcon,
+    leftIcon = null,
+    showSingleSelectButton,
+    showSelectedItem = true,
+    showSelectedItemCount = false,
+    testId,
+    labelTestId,
+    itemTestId,
+    leftContent,
+    bottomContent,
+    onselect,
+    ondropdownClick,
+    onkeydown
+  }: SelectProperties = $props();
+
+  const dropDownIconUrl = dropDownIcon ?? 'https://sdk.breeze.in/gallery/icons/down-arrow.svg';
+
+  let applyButtonProps: ButtonProperties = $derived({
+    text: `Select (${selectedItem.length})`,
+    enable: selectedItem.length > 0,
+    showLoader: false,
+    type: 'submit'
+  });
+
+  const selectAllButtonProps: ButtonProperties = {
+    text: 'Select All',
+    enable: true,
     showLoader: false,
-    loaderType: null,
-    type: "submit"
+    type: 'submit'
   };
-const selectAllButtonProps = {
-  text: "Select All",
-  enable: true,
-  showLoader: false,
-  loaderType: null,
-  type: "submit"
-};
-let isSelectOpen = false;
-const dispatch = createEventDispatcher();
-$:
-  nonSelectedItems = properties.allItems.filter(
-    (item) => properties.selectMultipleItems ? !properties.selectedItem.includes(item) : item !== properties.selectedItem
+
+  let isSelectOpen = $state(false);
+
+  let nonSelectedItems = $derived(
+    allItems.filter((item) =>
+      selectMultipleItems ? !selectedItem.includes(item) : item !== selectedItem
+    )
   );
-function isSelected(selectedItem, item) {
-  if (Array.isArray(selectedItem)) {
-    return selectedItem.includes(item);
-  } else {
-    return selectedItem.trim() === item.trim();
+
+  function isSelected(selectedItem: string | string[], item: string) {
+    if (Array.isArray(selectedItem)) {
+      return selectedItem.includes(item);
+    } else {
+      return selectedItem.trim() === item.trim();
+    }
   }
-}
-function selectItem(item) {
-  if (properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)) {
-    if (isSelected(properties.selectedItem, item)) {
-      properties.selectedItem = properties.selectedItem.filter(
-        (selectedItem) => selectedItem !== item
-      );
-      properties.selectedItemLabel = properties.selectedItemLabel.filter(
-        (label) => label !== item
-      );
+
+  function selectItem(item: string) {
+    if (selectMultipleItems && Array.isArray(selectedItemLabel) && Array.isArray(selectedItem)) {
+      if (isSelected(selectedItem, item)) {
+        selectedItem = selectedItem.filter((selected) => selected !== item);
+        selectedItemLabel = selectedItemLabel.filter((label) => label !== item);
+      } else {
+        selectedItem = [...selectedItem, item];
+        selectedItemLabel = [...selectedItemLabel, item];
+      }
     } else {
-      properties.selectedItem = [...properties.selectedItem, item];
-      properties.selectedItemLabel = [...properties.selectedItemLabel, item];
+      selectedItem = [item];
+      selectedItemLabel = [item];
+    }
+    if (!selectMultipleItems) {
+      toggleSelect();
+      dispatchEvent();
     }
-  } else {
-    properties.selectedItem = [item];
-    properties.selectedItemLabel = [item];
   }
-  if (!properties.selectMultipleItems) {
-    toggleSelect();
-    dispatchEvent();
+
+  function dispatchEvent() {
+    onselect?.({ selectedItems: selectedItem });
+    isSelectOpen = false;
   }
-}
-function dispatchEvent() {
-  dispatch("message", { selectedItems: properties.selectedItem });
-  isSelectOpen = false;
-}
-function toggleSelect() {
-  isSelectOpen = !isSelectOpen;
-  dispatch("dropdownClick");
-}
-function selectAllItems() {
-  if (properties.selectedItem.length === properties.allItems.length) {
-    properties.selectedItem = [];
-    properties.selectedItemLabel = [];
-  } else {
-    properties.selectedItem = [...properties.allItems];
-    properties.selectedItemLabel = [...properties.allItems];
+
+  function toggleSelect() {
+    isSelectOpen = !isSelectOpen;
+    ondropdownClick?.();
   }
-}
-function closeSelect(event) {
-  const clickedElement = event.target;
-  if (selectedElementDiv !== null && !selectedElementDiv.contains(clickedElement)) {
-    const isItemClicked = clickedElement.classList.contains("item");
-    const isApplyButtonClicked = clickedElement.classList.contains("apply-btn");
-    const isClearAllButtonClicked = clickedElement.innerText === "Clear All";
-    const isSelectAllButtonClicked = clickedElement.innerText === "Select All";
-    const isCheckListClicked = clickedElement.classList.contains("checkbox");
-    if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked && !isCheckListClicked) {
-      isSelectOpen = false;
+
+  function selectAllItems() {
+    if (selectedItem.length === allItems.length) {
+      selectedItem = [];
+      selectedItemLabel = [];
+    } else {
+      selectedItem = [...allItems];
+      selectedItemLabel = [...allItems];
     }
   }
-}
-onMount(() => {
-  document.addEventListener("click", closeSelect);
-});
-onDestroy(() => {
-  if (typeof window !== "undefined") {
-    document.removeEventListener("click", closeSelect);
+
+  function closeSelect(event: Event) {
+    const clickedElement = event.target as HTMLElement;
+    if (selectedElementDiv !== null && !selectedElementDiv.contains(clickedElement)) {
+      const isItemClicked = clickedElement.classList.contains('item');
+      const isApplyButtonClicked = clickedElement.classList.contains('apply-btn');
+      const isClearAllButtonClicked = clickedElement.innerText === 'Clear All';
+      const isSelectAllButtonClicked = clickedElement.innerText === 'Select All';
+      const isCheckListClicked = clickedElement.classList.contains('checkbox');
+      if (
+        !isItemClicked &&
+        !isApplyButtonClicked &&
+        !isClearAllButtonClicked &&
+        !isSelectAllButtonClicked &&
+        !isCheckListClicked
+      ) {
+        isSelectOpen = false;
+      }
+    }
   }
-});
+
+  onMount(() => {
+    document.addEventListener('click', closeSelect);
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('click', closeSelect);
+    }
+  });
 </script>
 
-{#if properties.label !== null && properties.label !== ''}
-  <label class="label-container" for={properties.label} data-pw={properties.labelTestId}>
-    {properties.label}
+{#if label !== null && label !== ''}
+  <label class="label-container" for={label} data-pw={labelTestId}>
+    {label}
   </label>
 {/if}
 
-{#if properties.allItems.length !== 0}
+{#if allItems.length !== 0}
   <div class="select">
     <div
       class="selected item"
-      on:click={toggleSelect}
+      onclick={toggleSelect}
       bind:this={selectedElementDiv}
-      on:keydown
+      {onkeydown}
       role="button"
       tabindex="0"
-      data-pw={properties.testId}
+      data-pw={testId}
     >
-      {#if properties.leftIcon !== null}
+      {#if leftIcon !== null}
         <div class="icon-container">
-          <Img {...properties.leftIcon} />
+          <Img {...leftIcon} />
         </div>
-        <slot name="leftContent" />
+      {/if}
+      {#if leftContent}
+        {@render leftContent()}
       {/if}
       <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(', ')}
+        {#if selectMultipleItems && Array.isArray(selectedItemLabel) && Array.isArray(selectedItem)}
+          {#if selectedItem.length === 0}
+            {placeholder}
+          {:else if selectedItemLabel?.length === 0 || (showSelectedItemInDropdown && showSelectedItem !== false)}
+            {selectedItem.join(', ')}
+          {:else if showSelectedItem !== false}
+            {selectedItemLabel.join(', ')}
           {:else}
-            {properties.placeholder}
+            {placeholder}
           {/if}
-        {:else if properties.selectedItem === ''}
-          {properties.placeholder}
-        {:else if properties.selectedItemLabel === null || (properties.selectedItemLabel === '' && properties.showSelectedItem !== false)}
-          {properties.selectedItem}
-        {:else if properties.showSelectedItem !== false}
-          {properties.selectedItemLabel}
+        {:else if selectedItem === ''}
+          {placeholder}
+        {:else if selectedItemLabel === null || (selectedItemLabel === '' && showSelectedItem !== false)}
+          {selectedItem}
+        {:else if showSelectedItem !== false}
+          {selectedItemLabel}
         {:else}
-          {properties.placeholder}
+          {placeholder}
         {/if}
       </div>
-      <div class="filler" />
-      {#if properties.showSelectedItemCount && properties.selectMultipleItems && Array.isArray(properties.selectedItem)}
+      <div class="filler"></div>
+      {#if showSelectedItemCount && selectMultipleItems && Array.isArray(selectedItem)}
         <div class="selected-item-count">
-          {properties.selectedItem.length}
+          {selectedItem.length}
         </div>
       {/if}
-      {#if !properties.hideDropDownIcon}
+      {#if !hideDropDownIcon}
         <img
-          src={dropDownIcon}
+          src={dropDownIconUrl}
           alt={dropDownIconAlt}
           class="arrow {isSelectOpen ? 'active' : ''}"
         />
@@ -170,42 +199,41 @@ onDestroy(() => {
       class="non-selected-items"
       style="--non-selected-display:{isSelectOpen ? 'inline-block' : 'none'};"
     >
-      {#if properties.selectMultipleItems && !properties.showSingleSelectButton}
+      {#if selectMultipleItems && !showSingleSelectButton}
         <div class="select-all-btn">
           <CheckListItem
-            checked={Array.isArray(properties.selectedItem) &&
-              properties.selectedItem.length === properties.allItems.length}
+            checked={Array.isArray(selectedItem) && selectedItem.length === allItems.length}
             text=""
-            on:click={selectAllItems}
+            onclick={selectAllItems}
           />
-          <Button properties={selectAllButtonProps} on:click={selectAllItems} />
+          <Button {...selectAllButtonProps} onclick={selectAllItems} />
         </div>
       {/if}
       <div class="item-list">
-        {#each properties.showSelectedItemInDropdown ? properties.allItems : nonSelectedItems as item}
+        {#each showSelectedItemInDropdown ? allItems : nonSelectedItems as item (item)}
           <div
-            on:keydown
-            on:click={() => {
+            {onkeydown}
+            onclick={() => {
               selectItem(item);
             }}
-            class="item {isSelected(properties.selectedItem, item) ? ' item-selected' : ''}"
+            class="item {isSelected(selectedItem, item) ? ' item-selected' : ''}"
             role="button"
             tabindex="0"
-            data-pw={`${properties.itemTestId}-${item}`}
+            data-pw={`${itemTestId}-${item}`}
           >
-            {#if properties.selectMultipleItems}
-              <CheckListItem checked={isSelected(properties.selectedItem, item)} text="" />
+            {#if selectMultipleItems}
+              <CheckListItem checked={isSelected(selectedItem, item)} text="" />
             {/if}
             {item}
           </div>
         {/each}
       </div>
-      {#if $$slots.bottomContent}
-        <slot name="bottomContent" />
+      {#if bottomContent}
+        {@render bottomContent()}
       {/if}
-      {#if properties.selectMultipleItems}
+      {#if selectMultipleItems}
         <div class="apply-btn-container">
-          <Button properties={applyButtonProps} on:click={dispatchEvent} />
+          <Button {...applyButtonProps} onclick={dispatchEvent} />
         </div>
       {/if}
     </div>

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

@@ -1,27 +1,4 @@
-import { SvelteComponent } from "svelte";
 import type { SelectProperties } from './properties';
-declare const __propDef: {
-    props: {
-        dropDownIconAlt?: string;
-        properties?: SelectProperties;
-    };
-    events: {
-        keydown: KeyboardEvent;
-        message: CustomEvent<any>;
-        dropdownClick: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        leftContent: {};
-        bottomContent: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
-}
-export {};
+declare const Select: import("svelte").Component<SelectProperties, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/Select/properties.d.ts

@@ -1,19 +1,28 @@
-import type { ImgProps } from '../Img/properties';
+import type { Snippet } from 'svelte';
+import type { ImgProperties } from '../Img/properties';
 export type SelectProperties = {
-    placeholder: string;
-    label: string;
-    allItems: string[];
-    selectedItem: string | string[];
-    selectedItemLabel: string | string[] | null;
-    showSelectedItemInDropdown: boolean;
-    selectMultipleItems: boolean;
+    dropDownIconAlt?: string;
+    placeholder?: string | null;
+    label?: string | null;
+    allItems?: string[];
+    selectedItem?: string | string[];
+    selectedItemLabel?: string | string[] | null;
+    showSelectedItemInDropdown?: boolean;
+    selectMultipleItems?: boolean;
     hideDropDownIcon?: boolean;
     dropDownIcon?: string;
-    leftIcon: ImgProps | null;
-    showSingleSelectButton?: boolean | null;
+    leftIcon?: ImgProperties | null;
+    showSingleSelectButton?: boolean;
     showSelectedItem?: boolean;
     showSelectedItemCount?: boolean;
     testId?: string;
     labelTestId?: string;
     itemTestId?: string;
+    leftContent?: Snippet;
+    bottomContent?: Snippet;
+    onselect?: (event: {
+        selectedItems: string | string[];
+    }) => void;
+    ondropdownClick?: () => void;
+    onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Status/Status.svelte

@@ -1,26 +1,26 @@
-<script context="module">export const prerender = true;
-</script>
+<script lang="ts">
+  import type { StatusProperties } from './properties';
+  import Button from '../Button/Button.svelte';
 
-<script>import { defaultStatusProperties } from "./properties";
-import Button from "../Button/Button.svelte";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let properties = defaultStatusProperties;
-function handleButtonClick() {
-  dispatch("buttonClick");
-}
+  let {
+    statusIcon = 'icons/order-success-icon.svg',
+    statusText = '',
+    statusDescription = '',
+    buttonProperties,
+    onbuttonClick
+  }: StatusProperties = $props();
 </script>
 
 <div class="background">
   <div class="order-status">
-    <div class="status-image"><img src={properties.statusIcon} alt="status" /></div>
-    <div class="status-text">{properties.statusText}</div>
+    <div class="status-image"><img src={statusIcon} alt="status" /></div>
+    <div class="status-text">{statusText}</div>
     <div class="status-description">
       <!-- eslint-disable-next-line -->
-      {@html properties.statusDescription}
+      {@html statusDescription}
     </div>
-    {#if properties.buttonProperties !== null}
-      <Button properties={properties.buttonProperties} on:click={handleButtonClick} />
+    {#if buttonProperties}
+      <Button {...buttonProperties} onclick={onbuttonClick} />
     {/if}
   </div>
 </div>

package/dist/Status/Status.svelte.d.ts

@@ -1,22 +1,4 @@
-import { SvelteComponent } from "svelte";
-export declare const prerender = true;
 import type { StatusProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties?: StatusProperties;
-    };
-    events: {
-        buttonClick: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type StatusProps = typeof __propDef.props;
-export type StatusEvents = typeof __propDef.events;
-export type StatusSlots = typeof __propDef.slots;
-export default class Status extends SvelteComponent<StatusProps, StatusEvents, StatusSlots> {
-}
-export {};
+declare const Status: import("svelte").Component<StatusProperties, {}, "">;
+type Status = ReturnType<typeof Status>;
+export default Status;

package/dist/Status/properties.d.ts

@@ -3,6 +3,6 @@ export type StatusProperties = {
     statusIcon: string;
     statusText: string;
     statusDescription: string;
-    buttonProperties: ButtonProperties | null;
+    buttonProperties?: ButtonProperties;
+    onbuttonClick?: () => void;
 };
-export declare const defaultStatusProperties: StatusProperties;

package/dist/Status/properties.js

@@ -1,6 +1 @@
-export const defaultStatusProperties = {
-    statusIcon: 'icons/order-success-icon.svg',
-    statusText: '',
-    statusDescription: '',
-    buttonProperties: null
-};
+export {};

package/dist/Stepper/Step.svelte

@@ -1,29 +1,29 @@
-<script>import { createEventDispatcher } from "svelte";
-export let stepIndex;
-export let label;
-export let icon;
-const dispatch = createEventDispatcher();
-function handleStepClick() {
-  dispatch("handleStepClick", { selectedIndex: stepIndex });
-}
+<script lang="ts">
+  import type { StepProperties } from './properties';
+
+  let { stepIndex, label, icon, onclick, onkeydown }: StepProperties = $props();
+
+  function handleStepClick() {
+    onclick?.({ selectedIndex: stepIndex });
+  }
 </script>
 
-<div class="step" on:click={handleStepClick} role="button" tabindex="0" on:keydown>
-  {#if icon !== null}
+<div class="step" onclick={handleStepClick} {onkeydown} role="button" tabindex="0">
+  {#if icon}
     <div class="step-icon-container">
       <img class="step-icon" src={icon} alt="" />
     </div>
   {:else}
     <div class="step-index-container">
-      <div class={'step-index-text'}>
+      <div class="step-index-text">
         {stepIndex}
       </div>
     </div>
   {/if}
-  <div class={'step-text'}>
+  <div class="step-text">
     {label}
   </div>
-  <div class={'separator'} />
+  <div class="separator"></div>
 </div>
 
 <style>

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

@@ -1,23 +1,4 @@
-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: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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 {};
+import type { StepProperties } from './properties';
+declare const Step: import("svelte").Component<StepProperties, {}, "">;
+type Step = ReturnType<typeof Step>;
+export default Step;

package/dist/Stepper/Stepper.svelte

@@ -1,18 +1,21 @@
-<script>import Step from "./Step.svelte";
-export let properties;
+<script lang="ts">
+  import type { StepperProperties } from './properties';
+  import Step from './Step.svelte';
+
+  let { steps, currentStepIndex, onhandleStepClick }: StepperProperties = $props();
 </script>
 
 <div class="container">
-  {#each properties.steps as currentStep, stepIndex}
+  {#each steps as currentStep, stepIndex}
     <div
-      class:active-step={properties.currentStepIndex === stepIndex}
-      class:completed-step={properties.currentStepIndex > stepIndex}
+      class:active-step={currentStepIndex === stepIndex}
+      class:completed-step={currentStepIndex > stepIndex}
       class="step-container"
     >
       <Step
-        on:handleStepClick
+        onclick={onhandleStepClick}
         label={currentStep.label}
-        icon={currentStep.icon ?? null}
+        icon={currentStep.icon}
         stepIndex={stepIndex + 1}
       />
     </div>