@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/Calendar/Calendar.svelte

@@ -0,0 +1,476 @@
+<script lang="ts">
+  import type { CalendarProperties } from './properties';
+  import { SvelteDate } from 'svelte/reactivity';
+  import { tick } from 'svelte';
+  import chevronLeftSvg from '../assets/chevron-left.svg?raw';
+  import chevronRightSvg from '../assets/chevron-right.svg?raw';
+  import Button from '../Button/Button.svelte';
+
+  let {
+    value = $bindable(null),
+    rangeStart = $bindable(null),
+    rangeEnd = $bindable(null),
+    mode = 'single',
+    minDate = null,
+    maxDate = null,
+    disabledDates = [],
+    weekStartsOn = 0,
+    locale,
+    testId,
+    previousMonthIcon,
+    nextMonthIcon,
+    onselect,
+    onrangeselect,
+    onmonthchange,
+    classes
+  }: CalendarProperties = $props();
+
+  const now = new SvelteDate();
+  let displayDate = new SvelteDate(now.getFullYear(), now.getMonth(), 1);
+  let focusedDay: number | null = $state(null);
+
+  let gridRef: HTMLElement | null = $state(null);
+
+  async function focusDayCell(): Promise<void> {
+    await tick();
+    if (focusedDay !== null && gridRef !== null) {
+      const btn = gridRef.querySelector(`[data-day="${focusedDay}"]`);
+      if (btn instanceof HTMLElement) {
+        btn.focus();
+      }
+    }
+  }
+
+  const dayNameFormatter = $derived(new Intl.DateTimeFormat(locale, { weekday: 'short' }));
+
+  const monthYearFormatter = $derived(
+    new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+  );
+
+  let dayNames: string[] = $derived(
+    Array.from({ length: 7 }, (_, i) => {
+      const d = new SvelteDate(2024, 0, 7 + weekStartsOn + i);
+      return dayNameFormatter.format(d);
+    })
+  );
+
+  let headerLabel: string = $derived(monthYearFormatter.format(displayDate));
+
+  let calendarDays = $derived.by(() => {
+    const displayYear = displayDate.getFullYear();
+    const displayMonth = displayDate.getMonth();
+    const firstOfMonth = new SvelteDate(displayYear, displayMonth, 1);
+    const lastOfMonth = new SvelteDate(displayYear, displayMonth + 1, 0);
+
+    let startDayOfWeek = firstOfMonth.getDay() - weekStartsOn;
+    if (startDayOfWeek < 0) {
+      startDayOfWeek += 7;
+    }
+
+    const totalDaysInMonth = lastOfMonth.getDate();
+    const today = new SvelteDate();
+    today.setHours(0, 0, 0, 0);
+
+    const normStart = rangeStart !== null ? normalizeDate(rangeStart) : null;
+    const normEnd = rangeEnd !== null ? normalizeDate(rangeEnd) : null;
+
+    type DayInfo = {
+      date: Date;
+      day: number;
+      isCurrentMonth: boolean;
+      isToday: boolean;
+      isDisabled: boolean;
+      isSelected: boolean;
+      isRangeStart: boolean;
+      isRangeEnd: boolean;
+      isInRange: boolean;
+    };
+
+    function fillerDay(year: number, month: number, day: number): DayInfo {
+      const date = new SvelteDate(year, month, day);
+      date.setHours(0, 0, 0, 0);
+      return {
+        date,
+        day,
+        isCurrentMonth: false,
+        isToday: false,
+        isDisabled: true,
+        isSelected: false,
+        isRangeStart: false,
+        isRangeEnd: false,
+        isInRange: false
+      };
+    }
+
+    const days: DayInfo[] = [];
+
+    const prevMonthDays = new SvelteDate(displayYear, displayMonth, 0).getDate();
+    for (let i = startDayOfWeek - 1; i >= 0; i--) {
+      days.push(fillerDay(displayYear, displayMonth - 1, prevMonthDays - i));
+    }
+
+    for (let day = 1; day <= totalDaysInMonth; day++) {
+      const date = new SvelteDate(displayYear, displayMonth, day);
+      date.setHours(0, 0, 0, 0);
+      const time = date.getTime();
+
+      days.push({
+        date,
+        day,
+        isCurrentMonth: true,
+        isToday: time === today.getTime(),
+        isDisabled: isDateDisabled(date),
+        isSelected: mode === 'single' && value !== null && isSameDay(date, value),
+        isRangeStart: mode === 'range' && normStart !== null && isSameDay(date, normStart),
+        isRangeEnd: mode === 'range' && normEnd !== null && isSameDay(date, normEnd),
+        isInRange:
+          mode === 'range' &&
+          normStart !== null &&
+          normEnd !== null &&
+          time > normStart.getTime() &&
+          time < normEnd.getTime()
+      });
+    }
+
+    const remainder = days.length % 7;
+    if (remainder > 0) {
+      for (let i = 1; i <= 7 - remainder; i++) {
+        days.push(fillerDay(displayYear, displayMonth + 1, i));
+      }
+    }
+
+    return days;
+  });
+
+  function normalizeDate(d: Date): Date {
+    const n = new SvelteDate(d);
+    n.setHours(0, 0, 0, 0);
+    return n;
+  }
+
+  function isSameDay(a: Date, b: Date): boolean {
+    return (
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate()
+    );
+  }
+
+  function isDateDisabled(date: Date): boolean {
+    const time = date.getTime();
+
+    if (minDate !== null && time < normalizeDate(minDate).getTime()) {
+      return true;
+    }
+    if (maxDate !== null && time > normalizeDate(maxDate).getTime()) {
+      return true;
+    }
+    if (typeof disabledDates === 'function') {
+      return disabledDates(date);
+    }
+    if (Array.isArray(disabledDates)) {
+      return disabledDates.some((d) => isSameDay(d, date));
+    }
+
+    return false;
+  }
+
+  function navigateMonth(delta: number): void {
+    displayDate.setMonth(displayDate.getMonth() + delta);
+    focusedDay = null;
+    onmonthchange?.({ year: displayDate.getFullYear(), month: displayDate.getMonth() });
+  }
+
+  function selectDate(date: Date): void {
+    if (isDateDisabled(date)) {
+      return;
+    }
+
+    focusedDay = date.getDate();
+
+    if (mode === 'single') {
+      value = date;
+      onselect?.({ date });
+    } else {
+      if (rangeStart === null || rangeEnd !== null) {
+        rangeStart = date;
+        rangeEnd = null;
+      } else {
+        const start = rangeStart;
+        if (date.getTime() < normalizeDate(start).getTime()) {
+          rangeEnd = start;
+          rangeStart = date;
+        } else {
+          rangeEnd = date;
+        }
+        onrangeselect?.({ rangeStart, rangeEnd });
+      }
+    }
+  }
+
+  function daysInMonth(year: number, month: number): number {
+    return new SvelteDate(year, month + 1, 0).getDate();
+  }
+
+  function handleKeyDown(event: KeyboardEvent): void {
+    const year = displayDate.getFullYear();
+    const month = displayDate.getMonth();
+    const totalDays = daysInMonth(year, month);
+
+    if (focusedDay === null) {
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+        event.preventDefault();
+        focusedDay = 1;
+        focusDayCell();
+        return;
+      }
+    }
+
+    switch (event.key) {
+      case 'ArrowRight':
+        event.preventDefault();
+        if (focusedDay !== null && focusedDay < totalDays) {
+          focusedDay++;
+        } else if (focusedDay === totalDays) {
+          navigateMonth(1);
+          focusedDay = 1;
+        }
+        focusDayCell();
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        if (focusedDay !== null && focusedDay > 1) {
+          focusedDay--;
+        } else if (focusedDay === 1) {
+          navigateMonth(-1);
+          focusedDay = daysInMonth(displayDate.getFullYear(), displayDate.getMonth());
+        }
+        focusDayCell();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (focusedDay !== null) {
+          if (focusedDay + 7 <= totalDays) {
+            focusedDay += 7;
+          } else {
+            const overflow = focusedDay + 7 - totalDays;
+            navigateMonth(1);
+            focusedDay = overflow;
+          }
+        }
+        focusDayCell();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (focusedDay !== null) {
+          if (focusedDay - 7 >= 1) {
+            focusedDay -= 7;
+          } else {
+            const currentDay = focusedDay;
+            const prevTotal = daysInMonth(year, month - 1);
+            navigateMonth(-1);
+            focusedDay = prevTotal + (currentDay - 7);
+          }
+        }
+        focusDayCell();
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (focusedDay !== null) {
+          const date = new SvelteDate(year, month, focusedDay);
+          date.setHours(0, 0, 0, 0);
+          selectDate(date);
+        }
+        break;
+    }
+  }
+</script>
+
+<div class="calendar {classes ?? ''}" data-pw={testId} role="application" aria-label="Calendar">
+  <div class="header">
+    <div class="nav-button nav-prev">
+      <Button onclick={() => navigateMonth(-1)} ariaLabel="Previous month">
+        {#if typeof previousMonthIcon === 'function'}
+          {@render previousMonthIcon()}
+        {:else}
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          {@html chevronLeftSvg}
+        {/if}
+      </Button>
+    </div>
+    <span class="header-label">{headerLabel}</span>
+    <div class="nav-button nav-next">
+      <Button onclick={() => navigateMonth(1)} ariaLabel="Next month">
+        {#if typeof nextMonthIcon === 'function'}
+          {@render nextMonthIcon()}
+        {:else}
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          {@html chevronRightSvg}
+        {/if}
+      </Button>
+    </div>
+  </div>
+
+  <div class="day-names">
+    {#each dayNames as name (name)}
+      <div class="day-name">{name}</div>
+    {/each}
+  </div>
+
+  <div class="grid" bind:this={gridRef} tabindex="0" role="grid" onkeydown={handleKeyDown}>
+    {#each calendarDays as dayInfo (dayInfo.date.getTime())}
+      {#if dayInfo.isCurrentMonth}
+        <button
+          type="button"
+          class="cell"
+          class:today={dayInfo.isToday}
+          class:selected={dayInfo.isSelected}
+          class:range-start={dayInfo.isRangeStart}
+          class:range-end={dayInfo.isRangeEnd}
+          class:in-range={dayInfo.isInRange}
+          class:disabled={dayInfo.isDisabled}
+          data-day={dayInfo.day}
+          disabled={dayInfo.isDisabled}
+          tabindex={focusedDay === dayInfo.day ? 0 : -1}
+          aria-label={dayInfo.date.toLocaleDateString(locale)}
+          onclick={() => selectDate(dayInfo.date)}
+        >
+          {dayInfo.day}
+        </button>
+      {:else}
+        <span class="cell outside-month">{dayInfo.day}</span>
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<style>
+  .calendar {
+    font-family: var(--calendar-font-family, inherit);
+    width: var(--calendar-width, 280px);
+    padding: var(--calendar-padding, 16px);
+    background-color: var(--calendar-background, #ffffff);
+    border: var(--calendar-border, 1px solid #e0e0e0);
+    border-radius: var(--calendar-border-radius, 8px);
+    box-shadow: var(--calendar-box-shadow, none);
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--calendar-header-margin-bottom, 12px);
+  }
+
+  .header-label {
+    font-size: var(--calendar-header-font-size, 16px);
+    font-weight: var(--calendar-header-font-weight, 600);
+    color: var(--calendar-header-color, #000000);
+    text-transform: capitalize;
+  }
+
+  .nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    --button-width: var(--calendar-nav-button-size, 32px);
+    --button-height: var(--calendar-nav-button-size, 32px);
+    --button-border: none;
+    --button-color: transparent;
+    --button-border-radius: var(--calendar-nav-button-border-radius, 4px);
+    --button-text-color: var(--calendar-nav-button-color, #666666);
+    --button-padding: 0;
+    --button-hover-color: var(--calendar-nav-button-hover-background, #f0f0f0);
+  }
+
+  .day-names {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+  }
+
+  .day-name {
+    font-size: var(--calendar-day-name-font-size, 12px);
+    font-weight: var(--calendar-day-name-font-weight, 600);
+    color: var(--calendar-day-name-color, #999999);
+    padding: var(--calendar-day-name-padding, 4px 0);
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    justify-items: center;
+    row-gap: 2px;
+  }
+
+  .cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--calendar-cell-size, 36px);
+    height: var(--calendar-cell-size, 36px);
+    font-family: inherit;
+    font-size: var(--calendar-cell-font-size, 14px);
+    border-radius: var(--calendar-cell-border-radius, 50%);
+    color: var(--calendar-cell-color, #000000);
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    outline: none;
+  }
+
+  .cell:hover:not(.disabled, .outside-month, .selected, .range-start, .range-end) {
+    background-color: var(--calendar-cell-hover-background, #f0f0f0);
+  }
+
+  .cell:focus-visible {
+    outline: 2px solid var(--calendar-focus-ring-color, #000000);
+    outline-offset: -2px;
+  }
+
+  .today {
+    border: var(--calendar-today-border, 1px solid #000000);
+    font-weight: var(--calendar-today-font-weight, 700);
+  }
+
+  .selected {
+    background-color: var(--calendar-selected-background, #000000);
+    color: var(--calendar-selected-color, #ffffff);
+  }
+
+  .range-start {
+    background-color: var(--calendar-range-start-background, #000000);
+    color: var(--calendar-range-start-color, #ffffff);
+    border-radius: 50% 0 0 50%;
+  }
+
+  .range-end {
+    background-color: var(--calendar-range-end-background, #000000);
+    color: var(--calendar-range-end-color, #ffffff);
+    border-radius: 0 50% 50% 0;
+  }
+
+  .range-start.range-end {
+    border-radius: var(--calendar-cell-border-radius, 50%);
+  }
+
+  .in-range {
+    background-color: var(--calendar-range-background, #e8e8e8);
+    border-radius: 0;
+  }
+
+  .disabled {
+    color: var(--calendar-disabled-color, #cccccc);
+    cursor: var(--calendar-disabled-cursor, not-allowed);
+  }
+
+  .outside-month {
+    color: var(--calendar-outside-month-color, #cccccc);
+    cursor: default;
+  }
+</style>

package/dist/Calendar/Calendar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarProperties } from './properties';
+declare const Calendar: import("svelte").Component<CalendarProperties, {}, "value" | "rangeStart" | "rangeEnd">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/Calendar/properties.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+export type CalendarProperties = OptionalCalendarProperties & CalendarEventProperties;
+export type OptionalCalendarProperties = {
+    value?: Date | null;
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    mode?: 'single' | 'range';
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    weekStartsOn?: 0 | 1;
+    locale?: string;
+    testId?: string;
+    previousMonthIcon?: Snippet;
+    nextMonthIcon?: Snippet;
+    classes?: string;
+};
+export type CalendarEventProperties = {
+    onselect?: (event: {
+        date: Date;
+    }) => void;
+    onrangeselect?: (event: {
+        rangeStart: Date;
+        rangeEnd: Date;
+    }) => void;
+    onmonthchange?: (event: {
+        year: number;
+        month: number;
+    }) => void;
+};

package/dist/Calendar/properties.js

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

package/dist/Carousel/Carousel.svelte

@@ -8,17 +8,18 @@
     autoplayInterval = 1000,
     showDots = false,
     isScrollableLast = false,
-    onkeydown
+    onkeydown,
+    classes
   }: CarouselProperties = $props();
 
-  let slidesDiv: HTMLDivElement | undefined = $state();
+  let slidesDiv: HTMLDivElement | null = $state(null);
   let intervalId: number;
   let endTouch: number;
   let startTouch: number;
   let startMouse: number;
   let endMouse: number;
   let carouselWidth: string;
-  let carouselDiv: HTMLDivElement | undefined = $state();
+  let carouselDiv: HTMLDivElement | null = $state(null);
   let activeSlideIndex = $state(0);
   let widthUnits: string;
 
@@ -66,17 +67,19 @@
   }
 
   function handleTouchStart(event: TouchEvent) {
-    if (event.touches && Object.keys(event.touches).length > 0) {
-      if (event.touches[0] && typeof event.changedTouches[0].clientX !== 'undefined') {
-        startTouch = event.touches[0].clientX;
+    if (event.touches.length > 0) {
+      const touch = event.touches.item(0);
+      if (touch !== null) {
+        startTouch = touch.clientX;
       }
     }
   }
 
   function handleTouchEnd(event: TouchEvent) {
-    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 (event.changedTouches.length > 0) {
+      const changedTouch = event.changedTouches.item(0);
+      if (changedTouch !== null) {
+        endTouch = changedTouch.clientX;
         if (startTouch - endTouch > 20) {
           nextSlide();
         } else {
@@ -89,13 +92,13 @@
   }
 
   function handleMouseDown(event: MouseEvent) {
-    if (event && Object.keys(event).length > 0 && typeof event.clientX !== 'undefined') {
+    if (typeof event.clientX !== 'undefined') {
       startMouse = event.clientX;
     }
   }
 
   function handeMouseUp(event: MouseEvent) {
-    if (event && Object.keys(event).length > 0 && typeof event.clientX !== 'undefined') {
+    if (typeof event.clientX !== 'undefined') {
       endMouse = event.clientX;
       if (startMouse - endMouse > 20) {
         nextSlide();
@@ -109,7 +112,7 @@
 
   function setWidthUnit(carouselWidth: string) {
     widthUnits = carouselWidth.slice(-3);
-    if (/^-?\d+$/.test(widthUnits[0])) {
+    if (/^-?\d+$/.test(widthUnits.at(0) ?? '')) {
       widthUnits = widthUnits.slice(-2);
     }
   }
@@ -135,13 +138,13 @@
   });
 </script>
 
-<div class="carousel-container">
-  {#if views.length}
+<div class="carousel-container {classes ?? ''}">
+  {#if views.length > 0}
     <div class="carousel" bind:this={carouselDiv}>
       <div class="slidesDiv" bind:this={slidesDiv}>
-        {#each views as view}
+        {#each views as view, index (index)}
           <div class="current-slide">
-            {#if view.properties}
+            {#if typeof view.properties === 'object'}
               <view.component properties={view.properties} />
             {:else}
               <view.component />

package/dist/Carousel/properties.d.ts

@@ -12,6 +12,7 @@ export type OptionalCarouselProperties = {
     autoplayInterval?: number;
     showDots?: boolean;
     isScrollableLast?: boolean;
+    classes?: string;
 };
 export type CarouselEventProperties = {
     onkeydown?: (event: KeyboardEvent) => void;

package/dist/CheckListItem/CheckListItem.svelte

@@ -1,30 +1,37 @@
 <script lang="ts">
   import type { CheckListItemProperties } from './properties';
+  import Checkbox from '../Checkbox/Checkbox.svelte';
 
   let {
     text,
     checked = $bindable(false),
+    disabled = false,
     checkboxLabel,
-    onclick
+    testId,
+    onclick,
+    classes
   }: CheckListItemProperties = $props();
 
-  function handleCheckboxClick(e: MouseEvent): void {
-    if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
-      checked = e.target.checked;
-    }
+  function handleClick(value: boolean): void {
+    checked = value;
     onclick?.(checked);
   }
 </script>
 
-<div class="container">
-  <input type="checkbox" class="checkbox" bind:checked onclick={handleCheckboxClick} />
-  {#if checkboxLabel}
-    {@render checkboxLabel?.()}
+<div class="container {classes ?? ''}" class:disabled data-pw={testId}>
+  <div class="checkbox-wrapper">
+    <Checkbox
+      text=""
+      bind:checked
+      {disabled}
+      onclick={handleClick}
+      {...typeof testId === 'string' ? { testId: `${testId}-checkbox` } : {}}
+    />
+  </div>
+  {#if typeof checkboxLabel === 'function'}
+    {@render checkboxLabel()}
   {:else}
-    <span class="text" class:checked>
-      <!-- eslint-disable-next-line -->
-      {@html text}
-    </span>
+    <span class="text" class:checked>{text}</span>
   {/if}
 </div>
 
@@ -34,11 +41,20 @@
     align-items: var(--check-list-item-align-items, center);
     width: var(--check-list-item-width, 100%);
     padding: var(--check-list-item-padding);
+    gap: var(--check-list-item-gap, 8px);
+  }
+
+  .container.disabled {
+    opacity: var(--check-list-item-disabled-opacity, 0.4);
+    cursor: not-allowed;
+  }
+
+  .checkbox-wrapper {
+    flex-shrink: 0;
   }
 
   .text {
-    margin: var(--check-list-item-margin, 0px 0px 0px 8px);
-    font-size: var(--check-list-item-text-size, 12px);
+    font-size: var(--check-list-item-text-size, 14px);
     color: var(--check-list-item-text-color);
   }
 
@@ -46,15 +62,4 @@
     color: var(--check-list-item-checked-text-color);
     font-weight: var(--check-list-item-checked-font-weight);
   }
-
-  input.checkbox {
-    accent-color: var(--checkbox-accent-color, #000);
-    border: 5px solid red;
-    height: var(--checkbox-height, 24px);
-    width: var(--checkbox-width, 24px);
-    margin: var(--checkbox-margin);
-    padding: var(--checkbox-padding);
-    border-radius: var(--checkbox-border-radius);
-    visibility: var(--checkbox-visibility);
-  }
 </style>