@juspay/svelte-ui-components 1.0.0

package/dist/Table/Table.svelte

@@ -0,0 +1,147 @@
+<script>import { onMount } from "svelte";
+export let properties = {
+  tableTitle: "",
+  tableHeaders: [],
+  tableData: [],
+  isTableScrollable: false,
+  isContentScrollable: false
+};
+let sortOrders = {};
+let sortedTableData = [...properties.tableData];
+function sortTableData(column) {
+  if (!sortOrders[column]) {
+    sortOrders[column] = "asc";
+  } else {
+    sortOrders[column] = sortOrders[column] === "asc" ? "desc" : "asc";
+  }
+  sortedTableData = [...properties.tableData].sort((a, b) => {
+    const colIndex = properties.tableHeaders.indexOf(column);
+    const valueA = a[colIndex];
+    const valueB = b[colIndex];
+    if (typeof valueA === "number" && typeof valueB === "number") {
+      return sortOrders[column] === "asc" ? valueA - valueB : valueB - valueA;
+    } else if (typeof valueA === "string" && typeof valueB === "string") {
+      return sortOrders[column] === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+    } else if (typeof valueA === "boolean" && typeof valueB === "boolean") {
+      return sortOrders[column] === "asc" ? valueA === valueB ? 0 : valueA ? -1 : 1 : valueA === valueB ? 0 : valueA ? 1 : -1;
+    } else {
+      return 0;
+    }
+  });
+  return 0;
+}
+onMount(() => {
+  sortedTableData = [...properties.tableData];
+});
+</script>
+
+{#if properties && properties.tableTitle}
+  <div class="table-title">
+    {properties.tableTitle}
+  </div>
+{/if}
+{#if properties.tableHeaders.length !== 0 || properties.tableData.length !== 0}
+  <div
+    class="table-container {properties.isTableScrollable ? 'scrollable-table' : ' '}"
+    role="grid"
+  >
+    <table>
+      <thead>
+        <tr>
+          {#each properties.tableHeaders as header}
+            <th class="table-header {properties.isTableScrollable ? 'table-header-sticky' : ' '}">
+              {header}
+              {#if sortOrders[header] === 'asc'}
+                <span
+                  class="sort-arrow"
+                  on:click={() => sortTableData(header)}
+                  on:keydown
+                  role="button"
+                  tabindex="0">▼</span
+                >
+              {:else}
+                <span
+                  class="sort-arrow"
+                  on:click={() => sortTableData(header)}
+                  on:keydown
+                  role="button"
+                  tabindex="0">▲</span
+                >
+              {/if}
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each sortedTableData as row}
+          <tr>
+            {#each row as cell}
+              <td class="table-content">
+                <div class={properties.isContentScrollable ? 'scrollable-content' : ' '}>
+                  {cell}
+                </div>
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
+
+<style>
+  .table-title {
+    margin: var(--table-title-margin, 0px 0px 10px 0px);
+    font-size: var(--table-tile-font-size, 25px);
+    font-family: var(--table-title-font-family);
+    padding: var(--table-title-padding);
+  }
+  .table-container {
+    border-top: var(--table-border, 0.5px solid #ccc);
+    width: var(--table-container-width, 400px);
+  }
+
+  .scrollable-table {
+    height: var(--table-container-height, 143px);
+    overflow-y: auto;
+  }
+  table {
+    width: var(--table-width, 400px);
+    border-collapse: var(--table-border-collapse, collapse);
+  }
+  .table-header,
+  .table-content {
+    border: var(--table-inner-border, 1px solid #ccc);
+    padding: var(--table-padding, 8px);
+    text-align: var(--table-text-align, left);
+    width: var(--table-column-width, 100px);
+    word-break: break-all;
+  }
+  .scrollable-content {
+    overflow-y: auto;
+    height: var(--scrollable-column-height, 20px);
+  }
+
+  .table-header {
+    background-color: var(--table-header-border-bgcolor, beige);
+    font-size: var(--table-header-font-size);
+    font-family: var(--table-header-font-family);
+    color: var(--table-header-font-color);
+  }
+
+  .table-header-sticky {
+    position: sticky;
+    top: -1px;
+  }
+
+  .table-content {
+    background-color: var(--table-content-border-bgcolor);
+    font-size: var(--table-content-font-size);
+    font-family: var(--table-content-font-family);
+    color: var(--table-content-font-color);
+  }
+
+  .sort-arrow {
+    font-size: 10px;
+  }
+</style>

package/dist/Table/Table.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TableProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: TableProperties | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/Table/properties.d.ts

@@ -0,0 +1,8 @@
+import type { JSONValue } from 'type-decoder';
+export type TableProperties = {
+    tableTitle: string | null;
+    tableHeaders: string[];
+    tableData: Array<JSONValue[]>;
+    isTableScrollable: boolean;
+    isContentScrollable: boolean;
+};

package/dist/Table/properties.js

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

package/dist/Toggle/Toggle.svelte

@@ -0,0 +1,86 @@
+<script>export let toggleValue = false;
+export let toggleText = "";
+</script>
+
+<div class="toggle-container">
+  <div class="toggle-text">{toggleText}</div>
+  <label class="switch">
+    <input class="input-checkbox" type="checkbox" bind:checked={toggleValue} />
+    <span class="slider round" />
+  </label>
+</div>
+
+<style>
+  .toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .toggle-text {
+    font-size: 14px;
+    font-weight: 500;
+    color: #4a4a4a;
+    margin-right: 8px;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 46px;
+    height: 25px;
+  }
+
+  .switch .input-checkbox {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--slider-unchecked-color, #ccc);
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 23px;
+    width: 23px;
+    left: 2px;
+    bottom: 1px;
+    top: 1px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  .input-checkbox:checked + .slider {
+    background-color: var(--slider-checked-color, #2196f3);
+  }
+
+  .input-checkbox:focus + .slider {
+    box-shadow: 0 0 1px #171717;
+  }
+
+  .input-checkbox:checked + .slider:before {
+    -webkit-transform: translateX(19px);
+    -ms-transform: translateX(19px);
+    transform: translateX(19px);
+  }
+
+  .slider.round {
+    border-radius: 23px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
+</style>

package/dist/Toggle/Toggle.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        toggleValue?: boolean | undefined;
+        toggleText?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponent<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

package/dist/Toolbar/Toolbar.svelte

@@ -0,0 +1,95 @@
+<script>import { createEventDispatcher } from "svelte";
+import { defaultToolbarProperties } from "./properties";
+export let properties = defaultToolbarProperties;
+const dispatch = createEventDispatcher();
+function handleBackClick() {
+  dispatch("backClick");
+}
+</script>
+
+<div class="toolbar">
+  <div class="content">
+    {#if $$slots.leftContent}
+      <slot name="leftContent" />
+    {:else if properties.showBackButton && properties.backIcon !== null}
+      <div class="back" on:click={handleBackClick} on:keydown role="button" tabindex="0">
+        <img src={properties.backIcon} alt="Back" />
+      </div>
+    {/if}
+    {#if $$slots.centerContent}
+      <div class="center-content">
+        <slot name="centerContent" />
+      </div>
+    {:else if properties.text !== null}
+      <div class="text">
+        {properties.text}
+      </div>
+    {/if}
+    {#if $$slots.rightContent}
+      <div class="right-content">
+        <slot name="rightContent" />
+      </div>
+    {/if}
+  </div>
+  <div class="additional-content">
+    {#if $$slots.additionalContent}
+      <slot name="additionalContent" />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .toolbar {
+    display: flex;
+    flex-direction: column;
+    padding: var(--toolbar-padding, 0px);
+    height: fit-content;
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--toolbar-background, #ffffff);
+    box-shadow: var(--toolbar-box-shadow, 0px 2px 12px #55687c1a);
+    z-index: var(--toolbar-z-index, 10);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    padding: var(--toolbar-content-padding, 0px);
+    align-items: center;
+    justify-content: var(--toolbar-justify-content, normal);
+    visibility: var(--toolbar-content-visibility, visible);
+  }
+
+  .additional-content {
+    display: flex;
+    flex-direction: row;
+    padding: var(--toolbar-additional-content-padding, 0px);
+    align-items: center;
+    height: var(--toolbar-additional-content-height, fit-content);
+    justify-content: var(--toolbar-justify-additional-content, normal);
+    visibility: var(--toolbar-additional-content-visibility, visible);
+  }
+
+  .back {
+    height: 20px;
+    width: 20px;
+    padding: 20px 14px;
+    cursor: pointer;
+  }
+
+  .center-content {
+    display: flex;
+    flex: 1;
+  }
+
+  .text {
+    font-size: 18px;
+  }
+
+  .right-content {
+    margin-left: auto;
+  }
+</style>

package/dist/Toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ToolbarProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: ToolbarProperties | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        backClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        leftContent: {};
+        centerContent: {};
+        rightContent: {};
+        additionalContent: {};
+    };
+};
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponent<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

package/dist/Toolbar/properties.d.ts

@@ -0,0 +1,6 @@
+export type ToolbarProperties = {
+    showBackButton: boolean;
+    text: string | null;
+    backIcon: string | null;
+};
+export declare const defaultToolbarProperties: ToolbarProperties;

package/dist/Toolbar/properties.js

@@ -0,0 +1,5 @@
+export const defaultToolbarProperties = {
+    showBackButton: true,
+    text: null,
+    backIcon: 'https://sdk.breeze.in/gallery/icons/back.svg'
+};

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+export { default as Modal } from './Modal/Modal.svelte';
+export { default as BrandLoader } from './BrandLoader/BrandLoader.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputButton } from './InputButton/InputButton.svelte';
+export { default as ListItem } from './ListItem/ListItem.svelte';
+export { default as Loader } from './Loader/Loader.svelte';
+export { default as Toolbar } from './Toolbar/Toolbar.svelte';
+export { default as Icon } from './Icon/Icon.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as ModalAnimation } from './Animations/ModalAnimation.svelte';
+export { default as OverlayAnimation } from './Animations/OverlayAnimation.svelte';
+export { default as Status } from './Status/Status.svelte';
+export { default as Carousel } from './Carousel/Carousel.svelte';
+export { default as Badge } from './Badge/Badge.svelte';
+export { default as Banner } from './Banner/Banner.svelte';
+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 type { ButtonProperties } from './Button/properties';
+export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
+export type { InputProperties } from './Input/properties';
+export type { InputButtonProperties } from './InputButton/properties';
+export type { ListItemProperties } from './ListItem/properties';
+export type { InputDataType } from './types';
+export type { AutoCompleteType } from './types';
+export type { CustomValidator } from './types';
+export type { ValidationState } from './types';
+export type { IconProperties } from './Icon/properties';
+export type { BrandLoaderProperties } from './BrandLoader/properties';
+export type { StatusProperties } from './Status/properties';
+export type { SelectProperties } from './Select/properties';
+export type { ToolbarProperties } from './Toolbar/properties';
+export type { CarouselProperties } from './Carousel/properties';
+export type { BadgeProperties } from './Badge/properties';
+export type { BannerProperties } from './Banner/properties';
+export { defaultIconProperties } from './Icon/properties';
+export { defaultButtonProperties } from './Button/properties';
+export { defaultModalProperties } from './Modal/properties';
+export { defaultInputProperties } from './Input/properties';
+export { defaultInputButtonProperties } from './InputButton/properties';
+export { defaultBrandLoaderProperties } from './BrandLoader/properties';
+export { defaultStatusProperties } from './Status/properties';
+export { defaultListItemProperties } from './ListItem/properties';
+export { defaultToolbarProperties } from './Toolbar/properties';
+export { defaultCarouselProperties } from './Carousel/properties';
+export { validateInput } from './utils';

package/dist/index.js

@@ -0,0 +1,30 @@
+export { default as Modal } from './Modal/Modal.svelte';
+export { default as BrandLoader } from './BrandLoader/BrandLoader.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputButton } from './InputButton/InputButton.svelte';
+export { default as ListItem } from './ListItem/ListItem.svelte';
+export { default as Loader } from './Loader/Loader.svelte';
+export { default as Toolbar } from './Toolbar/Toolbar.svelte';
+export { default as Icon } from './Icon/Icon.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as ModalAnimation } from './Animations/ModalAnimation.svelte';
+export { default as OverlayAnimation } from './Animations/OverlayAnimation.svelte';
+export { default as Status } from './Status/Status.svelte';
+export { default as Carousel } from './Carousel/Carousel.svelte';
+export { default as Badge } from './Badge/Badge.svelte';
+export { default as Banner } from './Banner/Banner.svelte';
+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 { defaultIconProperties } from './Icon/properties';
+export { defaultButtonProperties } from './Button/properties';
+export { defaultModalProperties } from './Modal/properties';
+export { defaultInputProperties } from './Input/properties';
+export { defaultInputButtonProperties } from './InputButton/properties';
+export { defaultBrandLoaderProperties } from './BrandLoader/properties';
+export { defaultStatusProperties } from './Status/properties';
+export { defaultListItemProperties } from './ListItem/properties';
+export { defaultToolbarProperties } from './Toolbar/properties';
+export { defaultCarouselProperties } from './Carousel/properties';
+export { validateInput } from './utils';

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @name InputDataType
+ * @description Different types of input data which can be passed to the Input Component
+ */
+export type InputDataType = 'text' | 'tel' | 'password' | 'email';
+export type AutoCompleteType = 'tel' | 'name' | 'email' | 'one-time-code' | 'postal-code' | 'street-address' | 'on' | 'address-level1';
+/**
+ * @name CustomValidator
+ * @description Function type for taking input parameter and returning a boolean denoting if the value is valid or not
+ */
+export type CustomValidator = (inputValue: string, currentValidationState: ValidationState) => ValidationState;
+export type TextTransformer = (text: string) => string;
+/**
+ * @description Type Map for Possible length values that can be passed to components
+ */
+/**
+ * @description Type Map for All possible output of an Input Filed Validation
+ */
+export type ValidationState = 'Valid' | 'InProgress' | 'Invalid';

package/dist/types.js

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

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+import type { CustomValidator, InputDataType, ValidationState } from './types';
+/**
+ * @description A common function to validate value provided inside the input component
+ * @param inputValue String value coming from input field
+ * @param dataType Datatype of the value being entered in the input component
+ * @param validPattern Regular expression which is supposed to be applied on the input string
+ * @param inProgressPattern Regular expression which is supposed to be applied on the input string while input is in progress
+ * @param customValidators Array of customer validator functions
+ * @returns ValidationState : InProgress | Valid | Invalid
+ */
+export declare function validateInput(inputValue: string, dataType: InputDataType, validPattern: RegExp | null, inProgressPattern: RegExp | null, customValidators: CustomValidator[]): ValidationState;

package/dist/utils.js

@@ -0,0 +1,147 @@
+/**
+ * @description A common function to validate value provided inside the input component
+ * @param inputValue String value coming from input field
+ * @param dataType Datatype of the value being entered in the input component
+ * @param validPattern Regular expression which is supposed to be applied on the input string
+ * @param inProgressPattern Regular expression which is supposed to be applied on the input string while input is in progress
+ * @param customValidators Array of customer validator functions
+ * @returns ValidationState : InProgress | Valid | Invalid
+ */
+export function validateInput(inputValue, dataType, validPattern, inProgressPattern, customValidators) {
+    let validationResult = 'Valid';
+    switch (dataType) {
+        case 'email':
+            validationResult = validateEmailInput(inputValue);
+            break;
+        case 'tel':
+            validationResult =
+                validPattern === null
+                    ? validatePhoneNumber(inputValue)
+                    : validateTextWithPattern(inputValue, validPattern, inProgressPattern);
+            break;
+        case 'password':
+            validationResult = validatePassword(inputValue, validPattern, inProgressPattern);
+            break;
+        case 'text':
+            validationResult = validateTextWithPattern(inputValue, validPattern, inProgressPattern);
+            break;
+    }
+    customValidators.forEach((validator) => {
+        const currentResult = validator(inputValue, validationResult);
+        if (currentResult === 'Invalid') {
+            validationResult = 'Invalid';
+        }
+        else if (currentResult === 'InProgress') {
+            validationResult = 'InProgress';
+        }
+        else {
+            validationResult =
+                validationResult === 'Valid' && currentResult === 'Valid' ? 'Valid' : validationResult;
+        }
+    });
+    return validationResult;
+}
+/**
+ * @description Validates input string against passed RegExp
+ * @param inputValue string
+ * @param validationPattern RegExp for valid input
+ * @param inProgressPattern RegExp for inprogress input
+ * @returns ValidationState
+ */
+function validateTextWithPattern(inputValue, validationPattern, inProgressPattern) {
+    if (validationPattern !== null) {
+        if (validationPattern.test(inputValue)) {
+            return 'Valid';
+        }
+        else if ((inProgressPattern !== null && inProgressPattern.test(inputValue)) ||
+            inputValue.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    return 'Valid';
+}
+/**
+ * @description Validates password string against passed RegExp
+ * @param password string
+ * @param validationPattern RegExp for valid input
+ * @param inProgressPattern RegExp for inprogress input
+ * @returns ValidationState
+ */
+function validatePassword(password, validationPattern, inProgressPattern) {
+    if (validationPattern !== null) {
+        if (validationPattern.test(password)) {
+            return 'Valid';
+        }
+        else if (inProgressPattern !== null &&
+            inProgressPattern.test(password) &&
+            password.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    return 'Valid';
+}
+/**
+ * @description Validates an email input based upon RF 5322 Email format
+ * @param emailId String
+ * @returns ValidationState
+ */
+function validateEmailInput(emailId) {
+    try {
+        /**
+         * @description Using RFC 5322 Format for validation
+         * @tutorial https://www.regextester.com/115911
+         * @tutorial https://emailregex.com/
+         * @tutorial https://stackoverflow.com/questions/42982005/email-address-regular-expression-rfc-5322-passed-in-to-match-does-not-work
+         * @tutorial https://www.regular-expressions.info/email.html
+         */
+        const validPattern = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+        const inProgressPattern = new RegExp(/[^ ]{1,}[\w0-9.,_,@]{0,}/);
+        if (validPattern.test(emailId)) {
+            return 'Valid';
+        }
+        else if (inProgressPattern.test(emailId) || emailId.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    catch (e) {
+        console.error('Email Regex creation failed: ', e);
+    }
+    return 'Valid';
+}
+/**
+ * @description Validates Indian phone numbers
+ * @todo Update Regex to take different variations of input in next update
+ * @link https://stackoverflow.com/questions/18351553/regular-expression-validation-for-indian-phone-number-and-mobile-number
+ * @param phoneNumber
+ * @returns ValidationState
+ */
+function validatePhoneNumber(phoneNumber) {
+    let validationPattern = null;
+    let inProgressPattern = null;
+    try {
+        validationPattern = new RegExp('^[6-9]{1}[0-9]{9}$');
+        inProgressPattern = new RegExp('^[6-9]{1}[0-9]{0,9}$');
+        if (validationPattern.test(phoneNumber)) {
+            return 'Valid';
+        }
+        else if (inProgressPattern.test(phoneNumber) || phoneNumber.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    catch (e) {
+        console.error('Phone Regex creation failed', e);
+    }
+    return phoneNumber.length === 10 ? 'Valid' : phoneNumber.length > 10 ? 'InProgress' : 'Invalid';
+}