@juspay/svelte-ui-components 1.0.0

package/dist/Button/properties.d.ts

@@ -0,0 +1,9 @@
+export type LoaderType = 'Circular' | 'ProgressBar';
+export type ButtonProperties = {
+    text: string;
+    enable: boolean;
+    showLoader: boolean;
+    loaderType: LoaderType | null;
+    type: 'submit' | 'reset' | 'button';
+};
+export declare const defaultButtonProperties: ButtonProperties;

package/dist/Button/properties.js

@@ -0,0 +1,7 @@
+export const defaultButtonProperties = {
+    text: 'click',
+    enable: true,
+    showLoader: false,
+    loaderType: null,
+    type: 'submit'
+};

package/dist/Carousel/Carousel.svelte

@@ -0,0 +1,219 @@
+<script>import { onMount, onDestroy } from "svelte";
+import { defaultCarouselProperties } from "./properties";
+export let properties = defaultCarouselProperties;
+let slidesDiv;
+let intervalId;
+let endTouch;
+let startTouch;
+let startMouse;
+let endMouse;
+let carouselWidth;
+let carouselDiv;
+let activeSlideIndex = 0;
+let widthUnits;
+function nextSlide() {
+  if (activeSlideIndex != properties.views.length - 1 || properties.isScrollableLast) {
+    activeSlideIndex++;
+    changeCurrentSlide();
+    if (properties.autoplay) {
+      resetInterval();
+    }
+  }
+}
+function previousSlide() {
+  if (activeSlideIndex != 0 || properties.isScrollableLast) {
+    activeSlideIndex--;
+    changeCurrentSlide();
+    if (properties.autoplay) {
+      resetInterval();
+    }
+  }
+}
+function changeCurrentSlide() {
+  if (activeSlideIndex > properties.views.length - 1) {
+    activeSlideIndex = 0;
+  } else if (activeSlideIndex < 0) {
+    activeSlideIndex = properties.views.length - 1;
+  }
+  if (slidesDiv) {
+    slidesDiv.style.transform = `translateX(${-activeSlideIndex * parseInt(carouselWidth)}${widthUnits})`;
+  }
+}
+function moveSlideToIndex(index) {
+  activeSlideIndex = index;
+  changeCurrentSlide();
+}
+function resetInterval() {
+  clearInterval(intervalId);
+  intervalId = window.setInterval(nextSlide, properties.autoplayInterval);
+}
+function handleTouchStart(event) {
+  if (event.touches && Object.keys(event.touches).length > 0) {
+    if (event.touches[0] && typeof event.changedTouches[0].clientX !== "undefined") {
+      startTouch = event.touches[0].clientX;
+    }
+  }
+}
+function handleTouchEnd(event) {
+  if (event.changedTouches && Object.keys(event.changedTouches).length > 0) {
+    if (event.changedTouches[0] && typeof event.changedTouches[0].clientX !== "undefined") {
+      endTouch = event.changedTouches[0].clientX;
+      if (startTouch - endTouch > 20) {
+        nextSlide();
+      } else {
+        if (endTouch - startTouch > 20) {
+          previousSlide();
+        }
+      }
+    }
+  }
+}
+function handleMouseDown(event) {
+  if (event && Object.keys(event).length > 0 && typeof event.clientX !== "undefined") {
+    startMouse = event.clientX;
+  }
+}
+function handeMouseUp(event) {
+  if (event && Object.keys(event).length > 0 && typeof event.clientX !== "undefined") {
+    endMouse = event.clientX;
+    if (startMouse - endMouse > 20) {
+      nextSlide();
+    } else {
+      if (endMouse - startMouse > 20) {
+        previousSlide();
+      }
+    }
+  }
+}
+function setWidthUnit(carouselWidth2) {
+  widthUnits = carouselWidth2.slice(-3);
+  if (/^-?\d+$/.test(widthUnits[0])) {
+    widthUnits = widthUnits.slice(-2);
+  }
+}
+onMount(() => {
+  if (carouselDiv) {
+    carouselWidth = getComputedStyle(carouselDiv).getPropertyValue("--carousel-width");
+    setWidthUnit(carouselWidth);
+    carouselDiv.addEventListener("touchstart", handleTouchStart);
+    carouselDiv.addEventListener("touchend", handleTouchEnd);
+    carouselDiv.addEventListener("mousedown", handleMouseDown);
+    carouselDiv.addEventListener("mouseup", handeMouseUp);
+  }
+  if (properties.autoplay) {
+    intervalId = window.setInterval(nextSlide, properties.autoplayInterval);
+  }
+});
+onDestroy(() => {
+  if (properties.autoplay) {
+    clearInterval(intervalId);
+  }
+});
+</script>
+
+<div class="carousel-container">
+  {#if properties.views.length}
+    <div class="carousel" bind:this={carouselDiv}>
+      <div class="slidesDiv" bind:this={slidesDiv}>
+        {#each properties.views as view}
+          <div class="current-slide">
+            {#if view.properties}
+              <svelte:component this={view.component} properties={view.properties} />
+            {:else}
+              <svelte:component this={view.component} />
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+  {#if properties.showDots}
+    <div class="dots-wrapper">
+      <!-- eslint-disable-next-line -->
+      {#each properties.views as _, index}
+        <div
+          class={activeSlideIndex == index ? 'active-dot' : 'dot'}
+          on:click={() => moveSlideToIndex(index)}
+          on:keydown
+          role="none"
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .carousel-container {
+    width: var(--carousel-width);
+  }
+  .current-slide {
+    width: var(--carousel-width, 300px);
+    height: var(--carousel-height, 100px);
+    flex-shrink: 0;
+  }
+  .carousel {
+    box-shadow: var(--carousel-shadow);
+    height: var(--carousel-height, 100px);
+    width: var(--carousel-width, 300px);
+    overflow: hidden;
+    border-radius: var(--carousel-border-radius, 0%);
+  }
+  .carousel:active {
+    cursor: grabbing;
+  }
+  .slidesDiv {
+    display: flex;
+    transform: translateX(0);
+    transition: transform 0.5s ease-in-out;
+  }
+  .dots-wrapper {
+    gap: var(--dot-gap, 10px);
+    padding-top: var(--dot-padding-top, 10px);
+    display: flex;
+    justify-content: center;
+  }
+  .dot {
+    width: var(--dot-width, 5px);
+    height: var(--dot-height, 5px);
+    border-radius: 50%;
+    background: #c4c4c4;
+    cursor: pointer;
+    transition: 0.3s ease;
+  }
+
+  .active-dot {
+    width: var(--dot-width, 5px);
+    height: var(--dot-height, 5px);
+    border-radius: 50%;
+    cursor: pointer;
+    background: #000000;
+    transition: 0.3s ease;
+  }
+  /*
+  @media only screen and (max-width: 324px) {
+
+    .carousel-container {
+      width:270px;
+
+    }
+    .current-slide {
+    width: 270px;
+    }
+    .carousel {
+      width:270px;
+    }
+  }
+
+  @media only screen and (max-width: 269px) {
+    .carousel-container {
+      width:240px;
+    }
+    .current-slide {
+    width: 240px;
+    }
+    .carousel {
+      width:240px;
+    }
+
+  } */
+</style>

package/dist/Carousel/Carousel.svelte.d.ts

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

package/dist/Carousel/properties.d.ts

@@ -0,0 +1,18 @@
+import type { SvelteComponent } from 'svelte';
+export type CarouselProperties = {
+    autoplay: boolean;
+    views: {
+        properties: Record<string, unknown> | null;
+        component: typeof SvelteComponent;
+    }[];
+    autoplayInterval: number;
+    showDots: boolean;
+    isScrollableLast: boolean;
+};
+export declare const defaultCarouselProperties: {
+    autoplay: boolean;
+    views: never[];
+    autoplayInterval: number;
+    showDots: boolean;
+    isScrollableLast: boolean;
+};

package/dist/Carousel/properties.js

@@ -0,0 +1,7 @@
+export const defaultCarouselProperties = {
+    autoplay: false,
+    views: [],
+    autoplayInterval: 1000,
+    showDots: false,
+    isScrollableLast: false
+};

package/dist/CheckListItem/CheckListItem.svelte

@@ -0,0 +1,40 @@
+<script>import { createEventDispatcher } from "svelte";
+export let text;
+export let checked;
+const dispatch = createEventDispatcher();
+function handleCheckboxClick(e) {
+  if (e.target instanceof HTMLInputElement && typeof e.target.checked === "boolean") {
+    checked = e.target.checked;
+  }
+  dispatch("click");
+}
+</script>
+
+<div class="container">
+  <input type="checkbox" class="checkbox" bind:checked on:click={handleCheckboxClick} />
+  <span class="text">
+    <!-- eslint-disable-next-line -->
+    {@html text}
+  </span>
+</div>
+
+<style>
+  .container {
+    display: var(--check-list-item-display, flex);
+    align-items: var(--check-list-item-align-items, center);
+    width: var(--check-list-item-width, 100%);
+  }
+
+  .text {
+    margin: var(--check-list-item-margin, 0px 0px 0px 8px);
+    font-size: var(--check-list-item-text-size, 12px);
+    color: var(--check-list-item-text-color);
+  }
+
+  input.checkbox {
+    accent-color: var(--checkbox-accent-color, #000);
+    border: 5px solid red;
+    height: var(--checkbox-height, 24px);
+    width: var(--checkbox-width, 24px);
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        checked: boolean;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckListItemProps = typeof __propDef.props;
+export type CheckListItemEvents = typeof __propDef.events;
+export type CheckListItemSlots = typeof __propDef.slots;
+export default class CheckListItem extends SvelteComponent<CheckListItemProps, CheckListItemEvents, CheckListItemSlots> {
+}
+export {};

package/dist/Icon/Icon.svelte

@@ -0,0 +1,32 @@
+<script>import { defaultIconProperties } from "./properties";
+export let properties = defaultIconProperties;
+</script>
+
+<div class="icon-container" on:click on:keydown role="button" tabindex="0">
+  <img src={properties.icon} alt="" />
+  {#if properties.text !== ''}
+    <div class="icon-text">{properties.text}</div>
+  {/if}
+</div>
+
+<style>
+  .icon-container {
+    display: flex;
+    padding: var(--icon-container-paddding, 4px);
+    flex-direction: var(--icon-container-direction, column);
+    align-items: center;
+    cursor: pointer;
+  }
+  .icon-container img {
+    height: var(--icon-height, 20px);
+    width: var(--icon-width, 20px);
+    padding: var(--icon-padding, 4px);
+  }
+
+  .icon-text {
+    display: flex;
+    padding: var(--icon-text-padding, 4px);
+    flex-direction: var(--icon-text-direction, column);
+    font-size: var(--icon-text-font-size, 12px);
+  }
+</style>

package/dist/Icon/Icon.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { IconProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: IconProperties | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+}
+export {};

package/dist/Icon/properties.d.ts

@@ -0,0 +1,5 @@
+export type IconProperties = {
+    icon: string;
+    text: string;
+};
+export declare const defaultIconProperties: IconProperties;

package/dist/Icon/properties.js

@@ -0,0 +1,4 @@
+export const defaultIconProperties = {
+    icon: '',
+    text: ''
+};

package/dist/Input/Input.svelte

@@ -0,0 +1,218 @@
+<script>import { validateInput } from "../utils";
+import { createEventDispatcher, onMount } from "svelte";
+import { defaultInputProperties } from "./properties";
+const dispatch = createEventDispatcher();
+export let properties = defaultInputProperties;
+let inputElement;
+$:
+  state = getValidationState(properties);
+function getValidationState(prop) {
+  const valueValidation = validateInput(
+    prop.value,
+    prop.dataType,
+    prop.validationPattern,
+    prop.inProgressPattern,
+    prop.validators
+  );
+  if (valueValidation === "InProgress" && prop.value.length > 0 && inputElement && inputElement !== document.activeElement) {
+    return "Invalid";
+  } else {
+    return valueValidation;
+  }
+}
+$:
+  showErrorMessage = state === "Invalid";
+function onInput(event) {
+  let currentValue = inputElement.value;
+  if (properties.dataType === "tel" && currentValue.length > 0) {
+    currentValue = properties.textTransformers.reduce((prevValue, currIndexFunction) => {
+      let newValue = currIndexFunction(prevValue);
+      return newValue;
+    }, currentValue);
+    currentValue = currentValue.replace(/\D+|\D/gm, "");
+    const numberLength = currentValue.length;
+    if (numberLength === 0) {
+      inputElement.value = properties.value;
+      return;
+    }
+    if (numberLength > properties.maxLength) {
+      const existingInput = properties.value;
+      if (existingInput.length == properties.maxLength) {
+        inputElement.value = properties.value;
+        return;
+      }
+      currentValue = currentValue.substring(numberLength - properties.maxLength);
+    }
+    inputElement.value = currentValue;
+  }
+  properties.value = currentValue;
+  properties = properties;
+  dispatch("input", event);
+}
+function onPaste(event) {
+  if (event.clipboardData) {
+    if (properties.dataType === "tel") {
+      let unfilteredNumber = event.clipboardData.getData("text");
+      unfilteredNumber = properties.textTransformers.reduce((prevValue, currIndexFunction) => {
+        let newValue = currIndexFunction(prevValue);
+        return newValue;
+      }, unfilteredNumber);
+      const filteredNumber = unfilteredNumber.replace(/\D+|\D/gm, "");
+      const filteredNumberLength = filteredNumber.length;
+      if (filteredNumber.length === 0) {
+        properties = properties;
+        event.preventDefault();
+      }
+      if (filteredNumber.length > properties.maxLength) {
+        const finalValue = filteredNumber.substring(filteredNumberLength - properties.maxLength);
+        properties.value = finalValue;
+        properties = properties;
+        dispatch("paste", event);
+        event.preventDefault();
+      }
+    }
+  }
+}
+function onFocusOut(event) {
+  if (state === "InProgress" && properties.value.length > 0) {
+    state = "Invalid";
+  }
+  dispatch("focusout", event);
+}
+onMount(() => {
+  if (properties.focus) {
+    inputElement.focus();
+  }
+  dispatch("stateChange", { state });
+});
+$: {
+  dispatch("stateChange", { state });
+}
+</script>
+
+<div class="input-container">
+  {#if properties.label && properties.label !== '' && !properties.actionInput}
+    <label class="label" for={properties.name}>
+      {properties.label}
+    </label>
+  {/if}
+
+  {#if properties.useTextArea}
+    <textarea
+      value={properties.value}
+      placeholder={properties.placeholder}
+      autocomplete={properties.autoComplete}
+      name={properties.name}
+      on:keydown
+      on:keyup
+      on:keypress
+      on:focus
+      on:focusout={onFocusOut}
+      on:input={onInput}
+      on:paste={onPaste}
+      class="
+        {properties.actionInput ? 'action-input' : ''}
+      "
+      style="--focus-border: {properties.addFocusColor ? 1 : 0}px;"
+      disabled={properties.disable}
+      bind:this={inputElement}
+      maxlength={properties.dataType === 'tel' ? undefined : properties.maxLength}
+      minlength={properties.minLength}
+    />
+  {:else}
+    <input
+      type={properties.dataType}
+      value={properties.value}
+      placeholder={properties.placeholder}
+      autocomplete={properties.autoComplete}
+      name={properties.name}
+      on:keydown
+      on:keyup
+      on:keypress
+      on:focus
+      on:focusout={onFocusOut}
+      on:input={onInput}
+      on:paste={onPaste}
+      class="
+      {properties.actionInput ? 'action-input' : ''}
+    "
+      disabled={properties.disable}
+      bind:this={inputElement}
+      maxlength={properties.dataType === 'tel' ? undefined : properties.maxLength}
+      minlength={properties.minLength}
+    />
+  {/if}
+
+  {#if properties.message.onError !== '' && showErrorMessage && !properties.actionInput}
+    <div class="error-message">
+      {properties.message.onError}
+    </div>
+  {/if}
+  {#if properties.message.info !== '' && !properties.actionInput}
+    <div class="info-message">
+      {properties.message.info}
+    </div>
+  {/if}
+</div>
+
+<style>
+  textarea,
+  input {
+    box-sizing: border-box;
+    height: var(--input-height, fit-content);
+    background-color: var(--input-background, white);
+    font-size: var(--input-font-size, 16px) !important;
+    font-family: var(--input-font-family, Euclid Circular A);
+    border-radius: var(--input-radius, 4px);
+    outline: none;
+    padding: var(--input-padding, 16px);
+    font-weight: var(--input-font-weight, 500);
+    width: var(--input-width, fit-content);
+    margin: var(--input-margin, 0px 0px 12px 0px);
+    -webkit-appearance: none !important; /* For Safari MWeb */
+    box-shadow: var(--input-box-shadow, 0px 1px 8px #2f537733);
+    border: var(--input-border, none);
+    resize: none;
+    visibility: var(--input-visibility, visible);
+    text-align: var(--input-text-align, left);
+  }
+
+  textarea:focus,
+  input:focus {
+    border: var(--input-focus-border);
+  }
+
+  .action-input {
+    border-radius: var(--input-radius, 4px 0px 0px 4px);
+    box-shadow: 0px 0px 0px #ffffff;
+    margin-bottom: 0;
+  }
+
+  .input-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .label {
+    font-weight: var(--input-label-msg-text-weight, 400);
+    font-size: var(--input-label-msg-text-size, 12px);
+    color: var(--input-label-msg-text-color, #637c95);
+    margin-bottom: 6px;
+  }
+
+  .error-message {
+    font-weight: var(--input-error-msg-text-weight, 400);
+    font-size: var(--input-error-msg-text-size, 12px);
+    color: var(--input-error-msg-text-color, #fa1405);
+  }
+
+  .info-message {
+    font-weight: var(--input-info-msg-text-weight, 400);
+    font-size: var(--input-info-msg-text-size, 12px);
+    color: var(--input-info-msg-text-color, #fa1405);
+  }
+
+  ::placeholder {
+    color: var(--input-placeholder-color);
+  }
+</style>

package/dist/Input/Input.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import { type InputProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: InputProperties | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        input: CustomEvent<any>;
+        paste: CustomEvent<any>;
+        focusout: CustomEvent<any>;
+        stateChange: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/dist/Input/properties.d.ts

@@ -0,0 +1,25 @@
+import type { AutoCompleteType, CustomValidator, InputDataType, TextTransformer } from '../types';
+export type InputProperties = {
+    value: string;
+    placeholder: string;
+    dataType: InputDataType;
+    label: string | null;
+    message: {
+        onError: string;
+        info: string;
+    };
+    validators: CustomValidator[];
+    focus: boolean;
+    disable: boolean;
+    validationPattern: RegExp | null;
+    inProgressPattern: RegExp | null;
+    addFocusColor: boolean;
+    maxLength: number;
+    minLength: number;
+    actionInput: boolean;
+    useTextArea: boolean;
+    autoComplete: AutoCompleteType;
+    name: string;
+    textTransformers: TextTransformer[];
+};
+export declare const defaultInputProperties: InputProperties;