@juspay/svelte-ui-components 1.12.0 → 1.14.0

package/dist/GridItem/GridItem.svelte

@@ -0,0 +1,113 @@
+<script>import { createEventDispatcher } from "svelte";
+export let icon = "";
+export let text = "";
+export let headerIcon = "";
+export let showLoader = false;
+const dispatch = createEventDispatcher();
+function onClick() {
+  showLoader = !showLoader;
+  dispatch("onClick");
+}
+</script>
+
+<div class="container" on:click={onClick} on:keydown role="button" tabindex="0">
+  <div class="grid-header">
+    <img src={headerIcon} alt="" class="grid-item-header-icon" />
+  </div>
+  <div class:grid-body-loader={showLoader}>
+    <div class="grid-item-body">
+      <img src={icon} alt="" class="grid-item-icon" />
+    </div>
+  </div>
+  <div class="grid-item-footer">{text}</div>
+</div>
+
+<style>
+  .container {
+    box-sizing: border-box;
+    height: var(--grid-item-height, fit-content);
+    width: var(--grid-item-width, fit-content);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    /** Remove button tap effect */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .grid-header {
+    display: flex;
+    width: var(--grid-header-width, 100%);
+    justify-content: var(--grid-header-justify-content, end);
+    position: var(--grid-header-position, absolute);
+    top: var(--grid-header-top, 5px);
+    z-index: var(--grid-header-z-index, 100);
+  }
+
+  .grid-item-header-icon {
+    height: var(--grid-item-header-icon-height, 16px);
+    width: var(--grid-item-header-icon-width, auto);
+    object-fit: var(--grid-item-header-icon-object-fit, contain);
+    z-index: var(--grid-item-header-icon-z-index, 2);
+  }
+
+  .grid-item-body {
+    height: var(--grid-item-height, 64px);
+    width: var(--grid-item-width, 64px);
+    background-color: var(--grid-item-background-color, #faf9f9);
+    border: var(--grid-item-border, 1px solid #eaeaea);
+    border-radius: var(--grid-item-border-radius, 4px);
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .grid-item-icon {
+    height: var(--grid-item-icon-height, 32px);
+    width: var(--grid-item-icon-width, auto);
+    object-fit: var(--grid-item-icon-object-fit, contain);
+    z-index: var(--grid-item-icon-z-index, 100);
+  }
+
+  .grid-item-footer {
+    margin: var(--grid-item-footer-margin, 8px 0 0 0);
+    font-size: var(--grid-item-font-size, 14px);
+    color: var(--grid-item-color, #333);
+  }
+
+  .grid-body-loader {
+    position: relative;
+  }
+
+  .grid-body-loader::before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    border-radius: var(--grid-item-border-radius, 4px);
+    border: var(--animation-version, 32px solid #cbcccf66);
+    animation: clipperAnimation var(--loader-animation-duration) infinite linear;
+  }
+
+  @keyframes clipperAnimation {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+    }
+    25% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+    }
+    50% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+    }
+    75% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+    }
+  }
+</style>

package/dist/GridItem/GridItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        icon?: string | undefined;
+        text?: string | undefined;
+        headerIcon?: string | undefined;
+        showLoader?: boolean | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        onClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridItemProps = typeof __propDef.props;
+export type GridItemEvents = typeof __propDef.events;
+export type GridItemSlots = typeof __propDef.slots;
+export default class GridItem extends SvelteComponent<GridItemProps, GridItemEvents, GridItemSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as Table } from './Table/Table.svelte';
 export { default as Stepper } from './Stepper/Stepper.svelte';
 export { default as Step } from './Stepper/Step.svelte';
 export { default as Toast } from './Toast/Toast.svelte';
+export { default as GridItem } from './GridItem/GridItem.svelte';
 export type { ButtonProperties } from './Button/properties';
 export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
 export type { InputProperties } from './Input/properties';

package/dist/index.js

@@ -21,6 +21,7 @@ export { default as Table } from './Table/Table.svelte';
 export { default as Stepper } from './Stepper/Stepper.svelte';
 export { default as Step } from './Stepper/Step.svelte';
 export { default as Toast } from './Toast/Toast.svelte';
+export { default as GridItem } from './GridItem/GridItem.svelte';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --host",
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",