@juspay/svelte-ui-components 1.0.0

package/dist/Input/properties.js

@@ -0,0 +1,23 @@
+export const defaultInputProperties = {
+    value: '',
+    placeholder: '',
+    dataType: 'text',
+    label: '',
+    message: {
+        onError: 'error',
+        info: ''
+    },
+    validators: [],
+    focus: true,
+    disable: false,
+    validationPattern: null,
+    inProgressPattern: null,
+    addFocusColor: false,
+    maxLength: 1000,
+    minLength: 0,
+    actionInput: false,
+    useTextArea: false,
+    autoComplete: 'on',
+    name: '',
+    textTransformers: []
+};

package/dist/InputButton/InputButton.svelte

@@ -0,0 +1,157 @@
+<script>import Button from "../Button/Button.svelte";
+import Input from "../Input/Input.svelte";
+import { createEventDispatcher } from "svelte";
+import { defaultInputButtonProperties } from "./properties";
+const dispatch = createEventDispatcher();
+export let properties = defaultInputButtonProperties;
+$:
+  state = "InProgress";
+$: {
+  if (properties.rightButtonProperties != null) {
+    properties.rightButtonProperties.enable = state === "Valid";
+    properties = properties;
+  }
+}
+function rightButtonClick() {
+  if (state === "Valid") {
+    dispatch("rightButtonClick", { value: properties.inputProperties.value });
+  }
+}
+function leftButtonClick(event) {
+  event.preventDefault();
+  dispatch("leftButtonClick");
+}
+function triggerRightClickIfValid(event) {
+  if (event?.key === "Enter") {
+    rightButtonClick();
+  }
+}
+function handleState(event) {
+  if (event && event?.detail?.state) {
+    state = event.detail.state;
+  }
+  dispatch("stateChange", event);
+}
+</script>
+
+{#if properties.inputProperties.label && properties.inputProperties.label !== ''}
+  <label class="label" for={properties.inputProperties.name}>
+    {properties.inputProperties.label}
+  </label>
+{/if}
+
+<div class="input-button-container">
+  <div class="input-button {state === 'Invalid' ? 'invalid' : 'valid'}">
+    {#if properties.leftButtonProperties != null}
+      <div class="left-button">
+        <Button properties={properties.leftButtonProperties} on:click={leftButtonClick}>
+          <slot name="left-icon" slot="icon" />
+        </Button>
+      </div>
+    {/if}
+    <div class="input">
+      <Input
+        properties={properties.inputProperties}
+        on:keyup={triggerRightClickIfValid}
+        on:stateChange={handleState}
+        on:input={(event) => dispatch('input', event)}
+        on:focus
+        --input-width="auto"
+      />
+    </div>
+    {#if properties.rightButtonProperties != null}
+      <div class="button">
+        <Button properties={properties.rightButtonProperties} on:click={rightButtonClick} />
+      </div>
+    {/if}
+  </div>
+</div>
+{#if properties.inputProperties.message.onError !== '' && state === 'Invalid'}
+  <div class="error-message">
+    {properties.inputProperties.message.onError}
+  </div>
+{/if}
+{#if typeof properties.inputProperties.message.info === 'string' && properties.inputProperties.message.info !== ''}
+  <div class="info-message">
+    {properties.inputProperties.message.info}
+  </div>
+{/if}
+
+<style>
+  .input-button-container {
+    height: var(--input-height, fit-content);
+    font-size: var(--input-font-size, 16px) !important;
+    font-weight: 500;
+    margin: var(--input-button-margin);
+    border-radius: var(--input-button-radius, 4px);
+    --button-width: 100%;
+    --input-border: none;
+    --input-focus-border: none;
+  }
+
+  .input-button {
+    display: flex;
+    align-items: center;
+    border-radius: var(--input-button-radius, 4px);
+    border: var(--input-button-border);
+    box-shadow: var(--input-button-box-shadow, 0px 1px 8px #2f537733);
+  }
+  .input-button-container:focus-within {
+    border: var(--input-button-focus-border);
+  }
+  .input {
+    flex: 2;
+    min-width: 0px;
+  }
+
+  .button {
+    flex: 1;
+    min-width: 0px;
+    --button-height: 54px;
+  }
+
+  .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;
+  }
+
+  .invalid {
+    outline: 1px solid var(--input-field-error-stroke, #e11900);
+  }
+
+  .error-message {
+    font-weight: var(--input-error-msg-text-weight, 400);
+    font-size: var(--input-error-msg-text-size, 14px);
+    color: var(--input-error-msg-text-color, #fa1405);
+    margin-top: 12px;
+  }
+
+  .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);
+    margin-top: 12px;
+  }
+
+  .left-button {
+    --button-color: var(--left-button-color);
+    --button-text-color: var(--left-button-text-color);
+    --button-font-family: var(--left-button-font-family);
+    --button-font-weight: var(--left-button-font-weight);
+    --button-font-size: var(--left-button-font-size);
+    --button-height: var(--left-button-height, 54px);
+    --button-padding: var(--left-button-padding);
+    --button-border-radius: var(--left-button-border-radius);
+    --button-width: var(--left-button-width);
+    --cursor: var(--left-button-cursor);
+    --opacity: var(--left-button-opacity);
+    --button-border: var(--left-button-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    --button-content-gap: var(--left-button-content-gap);
+  }
+</style>

package/dist/InputButton/InputButton.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import { type InputButtonProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: InputButtonProperties | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        input: CustomEvent<any>;
+        rightButtonClick: CustomEvent<any>;
+        leftButtonClick: CustomEvent<any>;
+        stateChange: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'left-icon': {
+            slot: string;
+        };
+    };
+};
+export type InputButtonProps = typeof __propDef.props;
+export type InputButtonEvents = typeof __propDef.events;
+export type InputButtonSlots = typeof __propDef.slots;
+export default class InputButton extends SvelteComponent<InputButtonProps, InputButtonEvents, InputButtonSlots> {
+}
+export {};

package/dist/InputButton/properties.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProperties } from '../Button/properties';
+import type { InputProperties } from '../Input/properties';
+export type InputButtonProperties = {
+    inputProperties: InputProperties;
+    rightButtonProperties: ButtonProperties | null;
+    leftButtonProperties: ButtonProperties | null;
+};
+export declare const defaultInputButtonProperties: InputButtonProperties;

package/dist/InputButton/properties.js

@@ -0,0 +1,17 @@
+import { defaultInputProperties } from '../Input/properties';
+const inputProperties = {
+    ...defaultInputProperties,
+    actionInput: true
+};
+const rightButtonProperties = {
+    text: 'click',
+    enable: false,
+    showLoader: false,
+    loaderType: null,
+    type: 'submit'
+};
+export const defaultInputButtonProperties = {
+    inputProperties,
+    rightButtonProperties,
+    leftButtonProperties: null
+};

package/dist/ListItem/ListItem.svelte

@@ -0,0 +1,196 @@
+<script>import Accordion from "../Accordion/Accordion.svelte";
+import Loader from "../Loader/Loader.svelte";
+import { defaultListItemProperties } from "./properties";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let properties = defaultListItemProperties;
+export let showLoader = false;
+export let showRightContentLoader = false;
+export let expand = false;
+function handleLeftImageClick() {
+  dispatch("leftImageClick");
+}
+function handleRightImageClick() {
+  dispatch("rightImageClick");
+}
+function handleCenterTextClick() {
+  dispatch("centerTextClick");
+}
+function handleItemClick() {
+  dispatch("itemClick");
+}
+function handleTopSectionClick() {
+  dispatch("topSectionClick");
+}
+</script>
+
+{#if properties.leftImageUrl || properties.rightImageUrl || properties.label || $$slots.leftContent || $$slots.centerContent || $$slots.rightContent || $$slots.bottomContent}
+  <div class="item-container">
+    {#if showLoader}
+      <div class="item-loader" />
+    {/if}
+    <div class="item" on:click={handleItemClick} on:keydown role="button" tabindex="0">
+      <div
+        class="top-section"
+        on:click={handleTopSectionClick}
+        on:keydown
+        role="button"
+        tabindex="0"
+      >
+        <div class="left-content">
+          {#if properties.leftImageUrl}
+            <div on:click={handleLeftImageClick} on:keydown role="button" tabindex="0">
+              <img class="left-img" src={properties.leftImageUrl} alt="" />
+            </div>
+          {/if}
+          {#if $$slots.leftContent}
+            <slot name="leftContent" />
+          {/if}
+        </div>
+        <div class="center-content">
+          {#if properties.label}
+            <div
+              class="center-text"
+              on:click={handleCenterTextClick}
+              on:keydown
+              role="button"
+              tabindex="0"
+            >
+              <!-- eslint-disable-next-line -->
+              {@html properties.label}
+            </div>
+          {/if}
+          {#if $$slots.centerContent}
+            <slot name="centerContent" />
+          {/if}
+        </div>
+        <div class="right-content">
+          {#if $$slots.rightContent}
+            <slot name="rightContent" />
+          {/if}
+          {#if properties.rightImageUrl}
+            <div on:click={handleRightImageClick} on:keydown role="button" tabindex="0">
+              <img class="right-img" src={properties.rightImageUrl} alt="" />
+            </div>
+          {/if}
+          {#if showRightContentLoader}
+            <Loader />
+          {/if}
+          {#if properties.rightContentText && properties.rightContentText !== ''}
+            <span class="right-content-text">{properties.rightContentText}</span>
+          {/if}
+        </div>
+      </div>
+      <div class="bottom-section">
+        {#if $$slots.bottomContent && properties.useAccordion}
+          <Accordion bind:expand>
+            <slot name="bottomContent" />
+          </Accordion>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .item-container {
+    position: relative;
+    --loader-foreground: var(--list-item-loader-foreground, #86898d);
+    --loader-background: var(--list-item-loader-background, #ffffff);
+    --loader-foreground-end: var(--list-item-loader-foreground-end, #ffffff);
+  }
+
+  .item-loader {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: var(--list-item-loader-background-color, #00000030);
+    z-index: 20;
+    animation: fill-loader ease-in-out var(--list-item-loader-duration, 8s);
+  }
+
+  @keyframes fill-loader {
+    0% {
+      width: 0;
+    }
+
+    100% {
+      width: 100%;
+    }
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--list-item-background-color, transparent);
+    -webkit-tap-highlight-color: transparent;
+    cursor: var(--list-item-cursor, pointer);
+    -moz-box-shadow: var(--list-item-box-shadow, none);
+    -webkit-box-shadow: var(--list-item-box-shadow, none);
+    box-shadow: var(--list-item-box-shadow, none);
+    width: var(--list-item-box-width);
+    border-radius: var(--list-item-border-radius, 0px);
+  }
+
+  .top-section {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 0;
+  }
+
+  .left-content {
+    display: flex;
+  }
+
+  .center-text {
+    display: flex;
+    flex-direction: column;
+    padding: var(--list-item-center-text-padding, 0px 20px);
+  }
+
+  .center-content {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .right-content {
+    display: flex;
+  }
+
+  .bottom-section {
+    flex-direction: row;
+    margin-top: 0;
+  }
+
+  .left-img {
+    height: var(--list-item-left-image-height, 24px);
+    width: var(--list-item-left-image-width, 24px);
+    padding: var(--list-item-left-image-padding, 0px);
+    border-radius: var(--list-item-left-image-border-radius, 0px);
+    margin: var(--list-item-left-image-margin, 0px);
+    filter: var(--list-item-left-image-filter, none);
+  }
+
+  .right-img {
+    height: var(--list-item-right-image-height, 18px);
+    width: var(--list-item-right-image-width, 18px);
+    padding: var(--list-item-right-image-padding, 0px);
+    border-radius: var(--list-item-right-image-border-radius, 0px);
+    margin: var(--list-item-right-image-margin, 0px);
+  }
+
+  .right-content-text {
+    color: var(--list-item-right-content-text-color, #2f3841);
+    font-size: var(--list-item-right-content-text-font-size, 12px);
+    font-weight: var(--list-item-right-content-text-font-weight, 300);
+    display: var(--list-item-right-content-display, flex);
+    align-items: var(--list-item-right-content-text-vertical-align);
+    padding: var(--list-item-right-content-text-padding, 0px);
+    margin: var(--list-item-right-content-text-margin, 0px);
+    border: var(--list-item-right-content-text-border);
+    cursor: var(--list-item-right-content-text-cursor, pointer);
+    font-family: var(--list-item-right-content-text-font-family);
+    justify-content: var(--list-item-right-content-text-justify-content);
+  }
+</style>

package/dist/ListItem/ListItem.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import { type ListItemProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: ListItemProperties | undefined;
+        showLoader?: boolean | undefined;
+        showRightContentLoader?: boolean | undefined;
+        expand?: boolean | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        leftImageClick: CustomEvent<any>;
+        rightImageClick: CustomEvent<any>;
+        centerTextClick: CustomEvent<any>;
+        itemClick: CustomEvent<any>;
+        topSectionClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        leftContent: {};
+        centerContent: {};
+        rightContent: {};
+        bottomContent: {};
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/dist/ListItem/properties.d.ts

@@ -0,0 +1,8 @@
+export type ListItemProperties = {
+    leftImageUrl: string | null;
+    rightImageUrl: string | null;
+    label: string | null;
+    useAccordion: boolean;
+    rightContentText: string | null;
+};
+export declare const defaultListItemProperties: ListItemProperties;

package/dist/ListItem/properties.js

@@ -0,0 +1,7 @@
+export const defaultListItemProperties = {
+    leftImageUrl: null,
+    rightImageUrl: null,
+    label: null,
+    useAccordion: false,
+    rightContentText: null
+};

package/dist/Loader/Loader.svelte

@@ -0,0 +1,89 @@
+<script context="module">export const prerender = true;
+</script>
+
+<div class="loader" />
+
+<style>
+  .loader {
+    font-size: var(--loader-font-size, 10px);
+    text-indent: var(--loader-text-indent, -9999em);
+    width: var(--loader-width, 20px);
+    height: var(--loader-height, 20px);
+    border-radius: var(--loader-border-radius, 50%);
+    background: var(--loader-foreground);
+    background: -moz-linear-gradient(
+      left,
+      var(--loader-foreground) 10%,
+      var(--loader-foreground-end) 42%
+    );
+    background: -webkit-linear-gradient(
+      left,
+      var(--loader-foreground) 10%,
+      var(--loader-foreground-end) 42%
+    );
+    background: -o-linear-gradient(
+      left,
+      var(--loader-foreground) 10%,
+      var(--loader-foreground-end) 42%
+    );
+    background: -ms-linear-gradient(
+      left,
+      var(--loader-foreground) 10%,
+      var(--loader-foreground-end) 42%
+    );
+    background: linear-gradient(
+      to right,
+      var(--loader-foreground) 10%,
+      var(--loader-foreground-end) 42%
+    );
+    position: relative;
+    -webkit-animation: load3 1.4s infinite linear;
+    animation: load3 1.4s infinite linear;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+  .loader:before {
+    width: var(--loader-before-width, 10px);
+    height: var(--loader-before-height, 10px);
+    background: var(--loader-foreground);
+    border-radius: var(--loader-before-border-radius, 100% 0 0 0);
+    position: var(--loader-before-position, absolute);
+    top: var(--loader-before-top, 0);
+    left: var(--loader-before-left, 0);
+    content: '';
+  }
+  .loader:after {
+    background: var(--loader-background);
+    width: var(--loader-after-width, 15px);
+    height: var(--loader-after-height, 15px);
+    border-radius: var(--loader-after-border-radius, 50%);
+    content: '';
+    margin: var(--loader-after-margin, auto);
+    position: var(--loader-after-position, absolute);
+    top: var(--loader-after-top, 0);
+    left: var(--loader-after-left, 0);
+    bottom: var(--loader-after-bottom, 0);
+    right: var(--loader-after-right, 0);
+  }
+  @-webkit-keyframes load3 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes load3 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/Loader/Loader.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+export declare const prerender = true;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};