@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/CheckListItem/properties.d.ts

@@ -1,11 +1,14 @@
 import type { Snippet } from 'svelte';
-export type CheckListItemProperties = OptionalCheckListItemProperties & CheckListItemEventProperties & MandatoryCheckListItemProperties;
+export type CheckListItemProperties = MandatoryCheckListItemProperties & OptionalCheckListItemProperties & CheckListItemEventProperties;
 export type MandatoryCheckListItemProperties = {
     text: string;
 };
 export type OptionalCheckListItemProperties = {
     checked?: boolean;
+    disabled?: boolean;
     checkboxLabel?: Snippet;
+    testId?: string;
+    classes?: string;
 };
 export type CheckListItemEventProperties = {
     onclick?: (checked: boolean) => void;

package/dist/Checkbox/Checkbox.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import type { CheckboxProperties } from './properties';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
+  import minusSvg from '../assets/minus.svg?raw';
+
+  let {
+    text,
+    checked = $bindable(false),
+    disabled = false,
+    indeterminate = $bindable(false),
+    testId,
+    checkedIcon,
+    indeterminateIcon,
+    onclick,
+    classes
+  }: CheckboxProperties = $props();
+
+  function handleClick(): void {
+    if (disabled) {
+      return;
+    }
+    checked = !checked;
+    if (indeterminate) {
+      indeterminate = false;
+    }
+    onclick?.(checked);
+  }
+
+  function handleKeyDown(e: KeyboardEvent): void {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<label class="container {classes ?? ''}" class:disabled onclick={handleClick} data-pw={testId}>
+  <input
+    type="checkbox"
+    class="native-checkbox"
+    {checked}
+    {disabled}
+    tabindex={-1}
+    aria-hidden="true"
+    onclick={(e: MouseEvent) => e.stopPropagation()}
+  />
+  <span
+    class="box"
+    class:checked
+    class:indeterminate
+    role="checkbox"
+    tabindex={disabled ? -1 : 0}
+    aria-checked={indeterminate ? 'mixed' : checked}
+    aria-disabled={disabled}
+    onkeydown={handleKeyDown}
+  >
+    {#if checked && !indeterminate}
+      {#if typeof checkedIcon === 'function'}
+        {@render checkedIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        <span class="icon">{@html checkmarkSvg}</span>
+      {/if}
+    {/if}
+    {#if indeterminate}
+      {#if typeof indeterminateIcon === 'function'}
+        {@render indeterminateIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        <span class="icon dash">{@html minusSvg}</span>
+      {/if}
+    {/if}
+  </span>
+  <span class="label" hidden={text.length === 0}>{text}</span>
+</label>
+
+<style>
+  .container {
+    display: var(--checkbox-container-display, inline-flex);
+    align-items: var(--checkbox-container-align-items, center);
+    gap: var(--checkbox-container-gap, 8px);
+    cursor: var(--checkbox-container-cursor, pointer);
+  }
+
+  .container.disabled {
+    opacity: var(--checkbox-disabled-opacity, 0.4);
+    cursor: var(--checkbox-disabled-cursor, not-allowed);
+  }
+
+  .native-checkbox {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  .box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--checkbox-size, 20px);
+    height: var(--checkbox-size, 20px);
+    border: var(--checkbox-border, 2px solid #757575);
+    border-radius: var(--checkbox-border-radius, 3px);
+    background-color: var(--checkbox-background, transparent);
+    transition:
+      background-color var(--checkbox-transition, 0.2s),
+      border var(--checkbox-transition, 0.2s);
+    flex-shrink: 0;
+  }
+
+  .box:focus-visible {
+    outline: none;
+    box-shadow: var(--checkbox-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));
+  }
+
+  .container:not(.disabled) .box:hover {
+    border-color: var(--checkbox-hover-border-color, #212121);
+  }
+
+  .box.checked {
+    background-color: var(--checkbox-checked-background, #2196f3);
+    border: var(--checkbox-checked-border, 2px solid #2196f3);
+  }
+
+  .box.indeterminate {
+    background-color: var(--checkbox-indeterminate-background, #2196f3);
+    border: var(--checkbox-indeterminate-border, 2px solid #2196f3);
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--checkbox-icon-size, 14px);
+    height: var(--checkbox-icon-size, 14px);
+    color: var(--checkbox-checkmark-color, white);
+  }
+
+  .icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon.dash {
+    color: var(--checkbox-dash-color, white);
+  }
+
+  .label {
+    font-size: var(--checkbox-label-font-size, 14px);
+    font-weight: var(--checkbox-label-font-weight, 400);
+    color: var(--checkbox-label-color, #212121);
+  }
+</style>

package/dist/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxProperties } from './properties';
+declare const Checkbox: import("svelte").Component<CheckboxProperties, {}, "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/Checkbox/properties.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+export type CheckboxProperties = MandatoryCheckboxProperties & OptionalCheckboxProperties & CheckboxEventProperties;
+export type MandatoryCheckboxProperties = {
+    text: string;
+};
+export type OptionalCheckboxProperties = {
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    testId?: string;
+    checkedIcon?: Snippet;
+    indeterminateIcon?: Snippet;
+    classes?: string;
+};
+export type CheckboxEventProperties = {
+    onclick?: (checked: boolean) => void;
+};

package/dist/Checkbox/properties.js

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

package/dist/Choicebox/Choicebox.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { ChoiceboxProperties } from './properties';
+
+  let {
+    children,
+    selected = $bindable(false),
+    mode = 'radio',
+    disabled = false,
+    testId,
+    onclick,
+    classes
+  }: ChoiceboxProperties = $props();
+
+  function handleClick(): void {
+    if (disabled) {
+      return;
+    }
+    if (mode === 'radio' && selected) {
+      return;
+    }
+    selected = !selected;
+    onclick?.(selected);
+  }
+
+  function handleKeyDown(e: KeyboardEvent): void {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="choicebox {classes ?? ''}"
+  class:selected
+  class:disabled
+  role={mode === 'radio' ? 'radio' : 'checkbox'}
+  aria-checked={selected}
+  aria-disabled={disabled}
+  tabindex={disabled ? -1 : 0}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  data-pw={testId}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .choicebox {
+    display: var(--choicebox-display, flex);
+    align-items: var(--choicebox-align-items, center);
+    padding: var(--choicebox-padding, 16px);
+    border: var(--choicebox-border, 2px solid #d0d0d0);
+    border-radius: var(--choicebox-border-radius, 12px);
+    background: var(--choicebox-background, #ffffff);
+    gap: var(--choicebox-gap, 12px);
+    cursor: var(--choicebox-cursor, pointer);
+    font-family: var(--choicebox-font-family, inherit);
+    transition: var(--choicebox-transition, border-color 0.2s, background 0.2s);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .choicebox:focus-visible {
+    outline: none;
+    box-shadow: var(--choicebox-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));
+  }
+
+  .choicebox:not(.disabled):hover {
+    border-color: var(--choicebox-hover-border-color, #9e9e9e);
+    background: var(--choicebox-hover-background, var(--choicebox-background, #ffffff));
+  }
+
+  .choicebox.selected {
+    border-color: var(--choicebox-selected-border-color, #2196f3);
+    background: var(--choicebox-selected-background, var(--choicebox-background, #ffffff));
+  }
+
+  .choicebox.disabled {
+    opacity: var(--choicebox-disabled-opacity, 0.4);
+    cursor: var(--choicebox-disabled-cursor, not-allowed);
+  }
+</style>

package/dist/Choicebox/Choicebox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChoiceboxProperties } from './properties';
+declare const Choicebox: import("svelte").Component<ChoiceboxProperties, {}, "selected">;
+type Choicebox = ReturnType<typeof Choicebox>;
+export default Choicebox;

package/dist/Choicebox/properties.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+export type ChoiceboxProperties = OptionalChoiceboxProperties & ChoiceboxEventProperties;
+export type ChoiceboxMode = 'radio' | 'checkbox';
+export type OptionalChoiceboxProperties = {
+    children?: Snippet;
+    selected?: boolean;
+    mode?: ChoiceboxMode;
+    disabled?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type ChoiceboxEventProperties = {
+    onclick?: (selected: boolean) => void;
+};

package/dist/Choicebox/properties.js

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