@juspay/svelte-ui-components 1.0.0

package/dist/Modal/Modal.svelte

@@ -0,0 +1,200 @@
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import ModalAnimation from "../Animations/ModalAnimation.svelte";
+import OverlayAnimation from "../Animations/OverlayAnimation.svelte";
+import { defaultModalProperties } from "./properties";
+const dispatch = createEventDispatcher();
+let overlayDiv;
+let backPressed = false;
+export let properties = defaultModalProperties;
+function handlePopstate() {
+  backPressed = true;
+  dispatch("close");
+}
+function handleRightImageClick() {
+  dispatch("headerRightImageClick");
+}
+function handleLeftImageClick() {
+  dispatch("headerLeftImageClick");
+}
+function handleOverlayClick(event) {
+  if (event.target && event.target === overlayDiv) {
+    dispatch("overlayClick");
+  }
+}
+function handleKeyDown(event) {
+  let key = event?.key;
+  if (key === "Escape") {
+    dispatch("overlayClick");
+  }
+}
+onMount(() => {
+  document.body.style.overflow = "hidden";
+  if (properties.supportHardwareBackPress) {
+    history.pushState(null, "", window.location.href);
+    window.addEventListener("popstate", handlePopstate);
+  }
+});
+onDestroy(() => {
+  if (typeof window !== "undefined") {
+    document.body.style.overflow = "";
+    if (properties.supportHardwareBackPress) {
+      if (!backPressed) {
+        history.back();
+      }
+      window.removeEventListener("popstate", handlePopstate);
+    }
+  }
+});
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+{#if $$slots.content}
+  <OverlayAnimation>
+    <div
+      bind:this={overlayDiv}
+      class="modal {properties.align} {properties.showOverlay
+        ? 'overlay-active'
+        : 'overlay-inactive'}"
+      on:click={handleOverlayClick}
+      on:keydown
+      role="button"
+      tabindex="0"
+    >
+      <ModalAnimation enable={properties.enableTransition} align={properties.align}>
+        <div class="modal-content {properties.size}">
+          {#if properties.header.leftImage !== null || properties.header.text !== null || properties.header.rightImage !== null}
+            <div class="header">
+              {#if properties.header.leftImage}
+                <div on:click={handleLeftImageClick} on:keydown role="button" tabindex="0">
+                  <img class="header-left-img" src={properties.header.leftImage} alt="" />
+                </div>
+              {/if}
+              {#if properties.header.text}
+                <div class="header-text">
+                  {properties.header.text}
+                </div>
+              {/if}
+              {#if properties.header.rightImage}
+                <div role="button" tabindex="0" on:click={handleRightImageClick} on:keydown>
+                  <img class="header-right-img" src={properties.header.rightImage} alt="" />
+                </div>
+              {/if}
+            </div>
+          {/if}
+          <div class="slot-content">
+            <slot name="content" />
+          </div>
+        </div>
+      </ModalAnimation>
+    </div>
+  </OverlayAnimation>
+{/if}
+
+<style>
+  .modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    z-index: var(--modal-z-index, 15);
+    -webkit-tap-highlight-color: transparent;
+    margin-top: var(--margin-top, 0px);
+    margin-bottom: var(--margin-bottom, 0px);
+    margin-left: var(--margin-left, 0px);
+    margin-right: var(--margin-right, 0px);
+  }
+
+  .overlay-active {
+    background-color: var(--background-color, #00000066);
+    pointer-events: auto;
+  }
+
+  .overlay-inactive {
+    pointer-events: none;
+  }
+
+  .modal-content {
+    pointer-events: auto;
+    background-color: var(--content-background-color, #ffffff);
+    cursor: auto;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--modal-border-radius, 0px);
+  }
+
+  .slot-content {
+    display: flex;
+    overflow-y: scroll;
+    scrollbar-width: none;
+  }
+
+  .slot-content::-webkit-scrollbar {
+    display: none;
+  }
+
+  .center {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .bottom {
+    justify-content: flex-end;
+  }
+
+  .top {
+    justify-content: flex-start;
+  }
+
+  .small {
+    height: var(--modal-small-height, 20vh);
+  }
+
+  .medium {
+    height: var(--modal-medium-height, 50vh);
+  }
+
+  .large {
+    height: var(--modal-large-height, 80vh);
+  }
+
+  .fit-content {
+    height: fit-content;
+    max-height: var(--modal-fit-content-max-height, 80vh);
+  }
+
+  .header {
+    display: flex;
+    background-color: var(--modal-header-background-color, #f6f7f9);
+    padding: 18px 20px;
+  }
+
+  .header-text {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    font-size: 16px;
+  }
+
+  .header-left-img,
+  .header-right-img {
+    padding-top: var(--header-img-top-padding, 5px);
+    cursor: pointer;
+  }
+
+  .header-left-img {
+    margin-right: 18px;
+    width: var(--header-left-image-width, 25px);
+    height: var(--header-left-image-height, 25px);
+  }
+
+  .header-right-img {
+    width: var(--header-right-image-width, 25px);
+    height: var(--header-right-image-height, 25px);
+  }
+</style>

package/dist/Modal/Modal.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ModalProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: ModalProperties | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        close: CustomEvent<any>;
+        headerRightImageClick: CustomEvent<any>;
+        headerLeftImageClick: CustomEvent<any>;
+        overlayClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        content: {};
+    };
+};
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};

package/dist/Modal/properties.d.ts

@@ -0,0 +1,15 @@
+export type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
+export type ModalAlign = 'top' | 'center' | 'bottom';
+export type ModalProperties = {
+    size: ModalSize;
+    align: ModalAlign;
+    showOverlay: boolean;
+    supportHardwareBackPress: boolean;
+    enableTransition: boolean;
+    header: {
+        leftImage: string | null;
+        rightImage: string | null;
+        text: string | null;
+    };
+};
+export declare const defaultModalProperties: ModalProperties;

package/dist/Modal/properties.js

@@ -0,0 +1,12 @@
+export const defaultModalProperties = {
+    size: 'fit-content',
+    align: 'center',
+    showOverlay: true,
+    supportHardwareBackPress: false,
+    header: {
+        leftImage: null,
+        rightImage: null,
+        text: null
+    },
+    enableTransition: true
+};

package/dist/Select/Select.svelte

@@ -0,0 +1,271 @@
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import Button from "../Button/Button.svelte";
+let selectedElementDiv = null;
+export let properties = {
+  placeholder: "",
+  label: "",
+  allItems: [],
+  selectedItem: "",
+  selectedItemLabel: null,
+  showSelectedItemInDropdown: false,
+  selectMultipleItems: false
+};
+const applyButtonProps = {
+  text: "Apply",
+  enable: true,
+  showLoader: false,
+  loaderType: null,
+  type: "submit"
+};
+const selectAllButtonProps = {
+  text: "Select All",
+  enable: true,
+  showLoader: false,
+  loaderType: null,
+  type: "submit"
+};
+const clearAllButtonProps = {
+  text: "Clear 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
+  );
+function selectItem(item) {
+  if (properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)) {
+    if (properties.selectedItem.includes(item)) {
+      properties.selectedItem = properties.selectedItem.filter(
+        (selectedItem) => selectedItem !== item
+      );
+      properties.selectedItemLabel = properties.selectedItemLabel.filter(
+        (label) => label !== item
+      );
+    } else {
+      properties.selectedItem = [...properties.selectedItem, item];
+      properties.selectedItemLabel = [...properties.selectedItemLabel, item];
+    }
+  } else {
+    properties.selectedItem = [item];
+  }
+  if (!properties.selectMultipleItems) {
+    toggleSelect();
+    dispatchEvent();
+  }
+}
+function dispatchEvent() {
+  dispatch("message", { selectedItems: properties.selectedItem });
+}
+function toggleSelect() {
+  isSelectOpen = !isSelectOpen;
+  dispatch("dropdownClick");
+}
+function clearAllItems() {
+  properties.selectedItem = [];
+  properties.selectedItemLabel = [];
+}
+function selectAllItems() {
+  properties.selectedItem = [...properties.allItems];
+  properties.selectedItemLabel = [...properties.allItems];
+}
+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";
+    if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked) {
+      isSelectOpen = false;
+    }
+  }
+}
+onMount(() => {
+  document.addEventListener("click", closeSelect);
+});
+onDestroy(() => {
+  if (typeof window !== "undefined") {
+    document.removeEventListener("click", closeSelect);
+  }
+});
+</script>
+
+{#if properties.label !== null}
+  <label class="label-container" for={properties.label}>
+    {properties.label}
+  </label>
+{/if}
+
+{#if properties.allItems.length !== 0}
+  <div class="select">
+    <div
+      class="selected item"
+      on:click={toggleSelect}
+      bind:this={selectedElementDiv}
+      on:keydown
+      role="button"
+      tabindex="0"
+    >
+      {#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.selectedItem.join(', ')}
+        {:else}
+          {properties.selectedItemLabel.join(', ')}
+        {/if}
+      {:else if properties.selectedItem === ''}
+        {properties.placeholder}
+      {:else if properties.selectedItemLabel === null || properties.selectedItemLabel === ''}
+        {properties.selectedItem}
+      {:else}
+        {properties.selectedItemLabel}
+      {/if}
+      <div class="filler" />
+      <img
+        src="https://sdk.breeze.in/gallery/icons/right-arrow.svg"
+        alt=""
+        class="arrow {isSelectOpen ? 'active' : ''}"
+      />
+    </div>
+    <div
+      class="non-selected-items"
+      style="--non-selected-display:{isSelectOpen ? 'inline-block' : 'none'};"
+    >
+      {#if properties.selectMultipleItems}
+        <div class="multipleSelect-btn">
+          <Button properties={applyButtonProps} on:click={dispatchEvent} />
+          <Button properties={selectAllButtonProps} on:click={selectAllItems} />
+          <Button properties={clearAllButtonProps} on:click={clearAllItems} />
+        </div>
+      {/if}
+      <div class="item-list">
+        {#each properties.showSelectedItemInDropdown ? properties.allItems : nonSelectedItems as item}
+          <div
+            on:keydown
+            on:click={() => {
+              selectItem(item);
+            }}
+            class="item {properties.selectedItem.includes(item) ? 'selected item-selected' : ''}"
+            role="button"
+            tabindex="0"
+          >
+            {item}
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .select {
+    height: var(--select-height, fit-content);
+    background-color: var(--select-bgcolor, #ffffff);
+    font-size: var(--select-font-size, 14px);
+    font-family: var(--select-font-family, Euclid Circular A);
+    border-radius: var(--select-radius, 4px);
+    font-weight: var(--select-font-weight, 400);
+    width: var(--select-width, 100%);
+    min-width: var(--select-min-width);
+    box-shadow: 0px 1px 8px #2f537733;
+    -webkit-appearance: none !important; /* For Safari MWeb */
+    outline: none;
+    cursor: pointer;
+    border: var(--select-border);
+    word-break: var(--select-word-break, break-word);
+    resize: none;
+    position: relative;
+    white-space: var(--select-white-space);
+    color: var(--select-color);
+    --button-margin: 1px;
+    --button-border-radius: 2px;
+  }
+
+  .arrow {
+    height: 16px;
+    width: 16px;
+    transform: rotate(-0.25turn);
+    transition: transform 0.1s;
+  }
+
+  .active {
+    transform: rotate(0.25turn);
+  }
+
+  .item {
+    padding: var(--item-padding, 8px);
+    border-radius: 4px;
+  }
+
+  .filler {
+    flex: 1;
+  }
+
+  .item:hover {
+    background-color: var(--non-selected-hover-bg, #00000010);
+    color: var(--non-selected-hover-color);
+  }
+
+  .selected {
+    margin: 0px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .selected:hover {
+    background-color: var(--selected-hover-bg, transparent);
+    color: var(--selected-color, black);
+  }
+
+  .non-selected-items {
+    display: var(--non-selected-display);
+    background-color: var(--non-selected-item-bgcolor, #ffffff);
+    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;
+    z-index: 10;
+    word-wrap: var(--non-selected-word-break, break-word);
+    white-space: var(--non-selected-white-space);
+  }
+
+  ::-webkit-scrollbar {
+    width: 0;
+  }
+
+  .item-list {
+    max-height: var(--non-selected-max-height, 135px);
+    overflow-y: auto;
+    position: relative;
+  }
+
+  .item-selected::after {
+    content: '✔';
+    position: absolute;
+    right: 7px;
+  }
+
+  .label-container {
+    font-weight: var(--label-text-weight, 400);
+    font-size: var(--label-text-size, 12px);
+    color: var(--label-text-color, #000000);
+    margin-bottom: 4px;
+    display: inline-block;
+  }
+
+  .multipleSelect-btn {
+    display: flex;
+    width: var(--multipleSelect-btn-width, 100%);
+    white-space: var(--multipleSelect-btn-white-space, nowrap);
+    padding: var(--multipleSelect-btn-padding, 2px);
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { SelectProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: SelectProperties | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        message: CustomEvent<any>;
+        dropdownClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/Select/properties.d.ts

@@ -0,0 +1,9 @@
+export type SelectProperties = {
+    placeholder: string;
+    label: string;
+    allItems: string[];
+    selectedItem: string | string[];
+    selectedItemLabel: string | string[] | null;
+    showSelectedItemInDropdown: boolean;
+    selectMultipleItems: boolean;
+};

package/dist/Select/properties.js

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

package/dist/Status/Status.svelte

@@ -0,0 +1,64 @@
+<script context="module">export const prerender = true;
+</script>
+
+<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");
+}
+</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-description">
+      <!-- eslint-disable-next-line -->
+      {@html properties.statusDescription}
+    </div>
+    {#if properties.buttonProperties !== null}
+      <Button properties={properties.buttonProperties} on:click={handleButtonClick} />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .status-text {
+    font-weight: var(--status-font-weight, 600);
+    color: var(--status-description-font-color, #2f3841);
+    margin-bottom: 8px;
+  }
+
+  .status-description {
+    font-weight: var(--status-font-weight, 400);
+    color: var(--status-description-font-color, #436484cc);
+    padding: 0px 42px;
+    margin-bottom: 25px;
+  }
+
+  .status-image {
+    display: flex;
+    margin-bottom: 25px;
+  }
+
+  .order-status {
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: var(--order-font, 'Euclid Circular A');
+    font-size: var(--order-font-size, 14px);
+    text-align: center;
+  }
+  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+    .order-status {
+      background-color: rgba(255, 255, 255, 0.6);
+      -webkit-backdrop-filter: blur(60px);
+      backdrop-filter: blur(60px);
+    }
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+export declare const prerender = true;
+import type { StatusProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: StatusProperties | undefined;
+    };
+    events: {
+        buttonClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/Status/properties.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProperties } from '../Button/properties';
+export type StatusProperties = {
+    statusIcon: string;
+    statusText: string;
+    statusDescription: string;
+    buttonProperties: ButtonProperties | null;
+};
+export declare const defaultStatusProperties: StatusProperties;

package/dist/Status/properties.js

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