@juspay/svelte-ui-components 2.30.0 → 2.32.0

package/dist/PieChart/properties.js

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

package/dist/SankeyChart/SankeyChart.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+  import type { SankeyChartProperties, SankeyTooltipContext } from './properties';
+  import ChartContainer from '../_chart/ChartContainer.svelte';
+  import ChartTooltip from '../_chart/ChartTooltip.svelte';
+  import { computeSankeyLayout } from '../_chart/geometry';
+  import { getColor } from '../_chart/colors';
+  import { formatNumber } from '../_chart/format';
+  import { SvelteSet } from 'svelte/reactivity';
+
+  // ── Props ──────────────────────────────────────────────────────
+
+  let {
+    nodes,
+    links,
+    nodeWidth = 16,
+    nodePadding = 8,
+    iterations = 6,
+    showValues = false,
+    showLabels = true,
+    aspectRatio = 16 / 9,
+    valueFormat,
+    tooltipSnippet,
+    empty,
+    onnodeclick,
+    onlinkclick,
+    onnodehover,
+    onlinkhover,
+    testId,
+    classes
+  }: SankeyChartProperties = $props();
+
+  // ── State ──────────────────────────────────────────────────────
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let chartWidth = $state(0);
+  let chartHeight = $state(0);
+  let hoveredNode = $state<string | null>(null);
+  let hoveredLink = $state<{ source: string; target: string } | null>(null);
+  let mouseX = $state(0);
+  let mouseY = $state(0);
+
+  // ── Layout ─────────────────────────────────────────────────────
+
+  let format = $derived(valueFormat ?? formatNumber);
+  let isEmpty = $derived(nodes.length === 0);
+  const MARGIN = 40;
+  let layout = $derived(
+    computeSankeyLayout(
+      nodes,
+      links,
+      Math.max(0, chartWidth - MARGIN * 2),
+      Math.max(0, chartHeight - MARGIN * 2),
+      nodeWidth,
+      nodePadding,
+      iterations
+    )
+  );
+
+  let connectedNodes = $derived.by(() => {
+    if (hoveredNode !== null) {
+      const connected = new SvelteSet<string>([hoveredNode]);
+      for (const l of links) {
+        if (l.source === hoveredNode || l.target === hoveredNode) {
+          connected.add(l.source);
+          connected.add(l.target);
+        }
+      }
+      return connected;
+    }
+    if (hoveredLink !== null) {
+      return new SvelteSet([hoveredLink.source, hoveredLink.target]);
+    }
+    return null;
+  });
+
+  // ── Tooltip ────────────────────────────────────────────────────
+
+  let tooltipData = $derived.by(() => {
+    if (hoveredNode !== null) {
+      const n = layout.nodes.find((nd) => nd.id === hoveredNode);
+      if (!n) {
+        return null;
+      }
+      return {
+        title: n.label,
+        items: [
+          {
+            label: 'Total flow',
+            value: format(n.value),
+            color: n.color ?? getColor(layout.nodes.indexOf(n))
+          }
+        ]
+      };
+    }
+    if (hoveredLink !== null) {
+      const l = links.find(
+        (lk) => lk.source === hoveredLink!.source && lk.target === hoveredLink!.target
+      );
+      if (!l) {
+        return null;
+      }
+      return {
+        title: `${nodes.find((n) => n.id === l.source)?.label ?? l.source} → ${nodes.find((n) => n.id === l.target)?.label ?? l.target}`,
+        items: [{ label: 'Flow', value: format(l.value) }]
+      };
+    }
+    return null;
+  });
+
+  let tooltipContext = $derived.by<SankeyTooltipContext | null>(() => {
+    if (hoveredNode !== null) {
+      const n = findNode(hoveredNode);
+      const computed = layout.nodes.find((nd) => nd.id === hoveredNode);
+      if (!n || !computed) {
+        return null;
+      }
+      return { type: 'node', node: n, value: computed.value };
+    }
+    if (hoveredLink !== null) {
+      const l = findLink(hoveredLink.source, hoveredLink.target);
+      if (!l) {
+        return null;
+      }
+      return { type: 'link', link: l };
+    }
+    return null;
+  });
+
+  // ── Interactions ───────────────────────────────────────────────
+
+  function trackMouse(e: MouseEvent) {
+    if (containerEl === null) {
+      return;
+    }
+    const rect = containerEl.getBoundingClientRect();
+    mouseX = e.clientX - rect.left;
+    mouseY = e.clientY - rect.top;
+  }
+
+  function isLinkHighlighted(source: string, target: string): boolean {
+    if (hoveredLink !== null) {
+      return source === hoveredLink.source && target === hoveredLink.target;
+    }
+    if (hoveredNode !== null) {
+      return source === hoveredNode || target === hoveredNode;
+    }
+    return false;
+  }
+
+  function findNode(id: string) {
+    return nodes.find((n) => n.id === id);
+  }
+
+  function findLink(source: string, target: string) {
+    return links.find((l) => l.source === source && l.target === target);
+  }
+
+  function handleNodeEnter(e: MouseEvent, id: string) {
+    hoveredNode = id;
+    trackMouse(e);
+    const orig = findNode(id);
+    if (orig) {
+      onnodehover?.({ node: orig });
+    }
+  }
+
+  function handleNodeLeave() {
+    hoveredNode = null;
+    onnodehover?.(null);
+  }
+
+  function handleNodeClick(id: string) {
+    const orig = findNode(id);
+    if (orig) {
+      onnodeclick?.({ node: orig });
+    }
+  }
+
+  function handleLinkEnter(e: MouseEvent, source: string, target: string) {
+    hoveredLink = { source, target };
+    trackMouse(e);
+    const orig = findLink(source, target);
+    if (orig) {
+      onlinkhover?.({ link: orig });
+    }
+  }
+
+  function handleLinkLeave() {
+    hoveredLink = null;
+    onlinkhover?.(null);
+  }
+
+  function handleLinkClick(source: string, target: string) {
+    const orig = findLink(source, target);
+    if (orig) {
+      onlinkclick?.({ link: orig });
+    }
+  }
+</script>
+
+<div
+  class="sankey-chart {classes ?? ''}"
+  bind:this={containerEl}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  {#if isEmpty && typeof empty === 'function'}
+    <div class="chart-empty">{@render empty()}</div>
+  {:else}
+    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+      <g transform="translate({MARGIN}, {MARGIN})">
+        {#each layout.links as link, i (i)}
+          {@const highlighted = isLinkHighlighted(link.source, link.target)}
+          {@const dimmed = (hoveredNode !== null || hoveredLink !== null) && !highlighted}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <path
+            class="sankey-link"
+            d={link.path}
+            fill="none"
+            stroke={link.color ?? getColor(layout.nodes.findIndex((n) => n.id === link.source))}
+            stroke-width={Math.max(1, link.width)}
+            stroke-opacity={highlighted ? 0.7 : dimmed ? 0.08 : 0.4}
+            onmouseenter={(e) => handleLinkEnter(e, link.source, link.target)}
+            onmousemove={trackMouse}
+            onmouseleave={handleLinkLeave}
+            onclick={() => handleLinkClick(link.source, link.target)}
+          />
+        {/each}
+
+        {#each layout.nodes as node, ni (ni)}
+          {@const color = node.color ?? getColor(ni)}
+          {@const dimmed = connectedNodes !== null && !connectedNodes.has(node.id)}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <rect
+            class="sankey-node"
+            class:node-dimmed={dimmed}
+            x={node.x}
+            y={node.y}
+            width={node.width}
+            height={node.height}
+            rx={2}
+            ry={2}
+            fill={color}
+            onmouseenter={(e) => handleNodeEnter(e, node.id)}
+            onmousemove={trackMouse}
+            onmouseleave={handleNodeLeave}
+            onclick={() => handleNodeClick(node.id)}
+          />
+          {#if showLabels}
+            <text
+              class="sankey-label"
+              class:node-dimmed={dimmed}
+              x={node.column === 0 ? node.x - 6 : node.x + node.width + 6}
+              y={node.y + node.height / 2}
+              text-anchor={node.column === 0 ? 'end' : 'start'}
+              dominant-baseline="middle"
+              >{node.label}{#if showValues}
+                ({format(node.value)}){/if}</text
+            >
+          {/if}
+        {/each}
+      </g>
+    </ChartContainer>
+
+    {#if typeof tooltipSnippet === 'function' && tooltipContext !== null}
+      <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+        {@render tooltipSnippet(tooltipContext)}
+      </div>
+    {:else}
+      <ChartTooltip data={tooltipData} {mouseX} {mouseY} />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .sankey-chart {
+    width: 100%;
+    position: relative;
+  }
+  .sankey-link {
+    transition: stroke-opacity var(--chart-transition-duration, 0.2s) ease;
+    cursor: pointer;
+  }
+  .sankey-node {
+    transition: opacity var(--chart-transition-duration, 0.2s) ease;
+    cursor: pointer;
+  }
+  .sankey-node.node-dimmed {
+    opacity: var(--sankey-dimmed-opacity, 0.15);
+  }
+  .sankey-label {
+    fill: var(--sankey-label-color, #333);
+    font-size: var(--sankey-label-font-size, 12px);
+    font-family: var(--chart-font-family, inherit);
+    pointer-events: none;
+    transition: opacity var(--chart-transition-duration, 0.2s) ease;
+  }
+  .sankey-label.node-dimmed {
+    opacity: var(--sankey-dimmed-opacity, 0.15);
+  }
+  .chart-tooltip-slot {
+    position: absolute;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .chart-empty {
+    padding: var(--chart-empty-padding, 32px 24px);
+    color: var(--chart-empty-color, #9ca3af);
+    text-align: center;
+  }
+</style>

package/dist/SankeyChart/SankeyChart.svelte.d.ts

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

package/dist/SankeyChart/properties.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+export type SankeyNode = {
+    id: string;
+    label?: string;
+    color?: string;
+};
+export type SankeyLink = {
+    source: string;
+    target: string;
+    value: number;
+    color?: string;
+};
+export type SankeyTooltipContext = {
+    type: 'node';
+    node: SankeyNode;
+    value: number;
+} | {
+    type: 'link';
+    link: SankeyLink;
+};
+export type SankeyChartProperties = MandatorySankeyChartProperties & OptionalSankeyChartProperties & SankeyChartEventProperties;
+export type MandatorySankeyChartProperties = {
+    nodes: SankeyNode[];
+    links: SankeyLink[];
+};
+export type OptionalSankeyChartProperties = {
+    nodeWidth?: number;
+    nodePadding?: number;
+    iterations?: number;
+    showValues?: boolean;
+    showLabels?: boolean;
+    aspectRatio?: number;
+    valueFormat?: (value: number) => string;
+    tooltipSnippet?: Snippet<[SankeyTooltipContext]>;
+    empty?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type SankeyChartEventProperties = {
+    onnodeclick?: (event: {
+        node: SankeyNode;
+    }) => void;
+    onlinkclick?: (event: {
+        link: SankeyLink;
+    }) => void;
+    onnodehover?: (event: {
+        node: SankeyNode;
+    } | null) => void;
+    onlinkhover?: (event: {
+        link: SankeyLink;
+    } | null) => void;
+};

package/dist/SankeyChart/properties.js

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

package/dist/Select/Select.svelte

@@ -13,6 +13,7 @@
     disabled = false,
     bottomContent,
     optionIndicator,
+    triggerSummary,
     testId,
     itemTestId,
     onchange,
@@ -256,30 +257,48 @@
     tabindex={disabled ? -1 : searchable ? -1 : 0}
   >
     {#if multiple}
-      {#each value as id (id)}
-        <Pill
-          text={getLabel(id)}
-          dismissible
-          {disabled}
-          ondismiss={() => removeItem(id)}
-          {...typeof testId === 'string' ? { testId: `${testId}-pill-${id}` } : {}}
-        />
-      {/each}
-      {#if searchable}
-        <input
-          class="select-search"
-          type="text"
-          value={query}
-          oninput={handleSearchInput}
-          onfocus={handleSearchFocus}
-          bind:this={searchInputEl}
-          placeholder={value.length === 0 ? placeholder : ''}
-          {disabled}
-          autocomplete="off"
-          tabindex={disabled ? -1 : 0}
-        />
-      {:else if value.length === 0}
-        <span class="select-placeholder">{placeholder}</span>
+      {#if typeof triggerSummary === 'function'}
+        {@render triggerSummary({ value, items })}
+        {#if searchable}
+          <input
+            class="select-search"
+            type="text"
+            value={query}
+            oninput={handleSearchInput}
+            onfocus={handleSearchFocus}
+            bind:this={searchInputEl}
+            placeholder={value.length === 0 ? placeholder : ''}
+            {disabled}
+            autocomplete="off"
+            tabindex={disabled ? -1 : 0}
+          />
+        {/if}
+      {:else}
+        {#each value as id (id)}
+          <Pill
+            text={getLabel(id)}
+            dismissible
+            {disabled}
+            ondismiss={() => removeItem(id)}
+            {...typeof testId === 'string' ? { testId: `${testId}-pill-${id}` } : {}}
+          />
+        {/each}
+        {#if searchable}
+          <input
+            class="select-search"
+            type="text"
+            value={query}
+            oninput={handleSearchInput}
+            onfocus={handleSearchFocus}
+            bind:this={searchInputEl}
+            placeholder={value.length === 0 ? placeholder : ''}
+            {disabled}
+            autocomplete="off"
+            tabindex={disabled ? -1 : 0}
+          />
+        {:else if value.length === 0}
+          <span class="select-placeholder">{placeholder}</span>
+        {/if}
       {/if}
     {:else if searchable}
       <input

package/dist/Select/properties.d.ts

@@ -27,6 +27,11 @@ export type OptionalSelectProperties = {
     open?: boolean;
     /** Horizontal anchor of the dropdown panel. `'left'` (default) anchors to the trigger's left edge; `'right'` anchors to the right edge so a content-wider panel hangs leftward instead of overflowing. */
     dropdownAlign?: 'left' | 'right';
+    /** Snippet for rendering a compact trigger summary in multiple mode instead of one Pill per selected value. Receives `{ value, items }` so the consumer can compute e.g. "All" / "3 selected". When not provided the default Pill-per-value behaviour is used. */
+    triggerSummary?: import('svelte').Snippet<[{
+        value: string[];
+        items: SelectItem[];
+    }]>;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/dist/_chart/Axis.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { AxisProperties } from './types';
+  import { defaultTickFormat } from './format';
+
+  let {
+    orientation,
+    scale,
+    tickCount = 5,
+    tickFormat,
+    showGridlines = false,
+    gridlineLength = 0,
+    label,
+    classes
+  }: AxisProperties = $props();
+
+  let format = $derived(tickFormat ?? defaultTickFormat);
+
+  let isHorizontal = $derived(orientation === 'top' || orientation === 'bottom');
+
+  let tickValues = $derived.by(() => {
+    if ('ticks' in scale && typeof scale.ticks === 'function') {
+      return scale.ticks(tickCount);
+    }
+    if ('domain' in scale && Array.isArray(scale.domain)) {
+      return scale.domain;
+    }
+    return [];
+  });
+
+  let isBand = $derived('bandwidth' in scale);
+  let bandOffset = $derived(isBand && 'bandwidth' in scale ? scale.bandwidth / 2 : 0);
+
+  function positionTick(tick: number | string): number {
+    if ('bandwidth' in scale) {
+      return scale(String(tick)) + bandOffset;
+    }
+    return scale(Number(tick)) + bandOffset;
+  }
+
+  const TICK_SIZE = 6;
+</script>
+
+<g class="axis axis-{orientation} {classes ?? ''}">
+  {#if isHorizontal}
+    <line class="axis-line" x1={scale.range[0]} x2={scale.range[1]} y1={0} y2={0} />
+    {#each tickValues as tick, i (i)}
+      {@const x = positionTick(tick)}
+      <g class="tick" transform="translate({x}, 0)">
+        <line class="tick-mark" y2={orientation === 'bottom' ? TICK_SIZE : -TICK_SIZE} />
+        <text
+          class="tick-label"
+          y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
+          text-anchor="middle"
+          dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
+        >
+          {format(tick)}
+        </text>
+        {#if showGridlines && gridlineLength > 0}
+          <line
+            class="gridline"
+            y1={0}
+            y2={orientation === 'bottom' ? -gridlineLength : gridlineLength}
+          />
+        {/if}
+      </g>
+    {/each}
+    {#if label}
+      <text
+        class="axis-label"
+        x={(scale.range[0] + scale.range[1]) / 2}
+        y={orientation === 'bottom' ? 36 : -30}
+        text-anchor="middle"
+      >
+        {label}
+      </text>
+    {/if}
+  {:else}
+    <line class="axis-line" y1={scale.range[0]} y2={scale.range[1]} x1={0} x2={0} />
+    {#each tickValues as tick, i (i)}
+      {@const y = positionTick(tick)}
+      <g class="tick" transform="translate(0, {y})">
+        <line class="tick-mark" x2={orientation === 'left' ? -TICK_SIZE : TICK_SIZE} />
+        <text
+          class="tick-label"
+          x={orientation === 'left' ? -(TICK_SIZE + 4) : TICK_SIZE + 4}
+          text-anchor={orientation === 'left' ? 'end' : 'start'}
+          dominant-baseline="middle"
+        >
+          {format(tick)}
+        </text>
+        {#if showGridlines && gridlineLength > 0}
+          <line
+            class="gridline"
+            x1={0}
+            x2={orientation === 'left' ? gridlineLength : -gridlineLength}
+          />
+        {/if}
+      </g>
+    {/each}
+    {#if label}
+      <text
+        class="axis-label"
+        transform="rotate(-90)"
+        x={-(scale.range[0] + scale.range[1]) / 2}
+        y={orientation === 'left' ? -40 : 40}
+        text-anchor="middle"
+      >
+        {label}
+      </text>
+    {/if}
+  {/if}
+</g>
+
+<style>
+  .axis-line {
+    stroke: var(--chart-axis-color, #666);
+    stroke-width: var(--chart-axis-stroke-width, 1);
+  }
+
+  .tick-mark {
+    stroke: var(--chart-axis-color, #666);
+    stroke-width: var(--chart-axis-stroke-width, 1);
+  }
+
+  .tick-label {
+    fill: var(--chart-axis-color, #666);
+    font-size: var(--chart-axis-font-size, 11px);
+    font-family: var(--chart-axis-font-family, inherit);
+  }
+
+  .axis-label {
+    fill: var(--chart-axis-label-color, #333);
+    font-size: var(--chart-axis-label-font-size, 12px);
+    font-family: var(--chart-axis-font-family, inherit);
+    font-weight: 500;
+  }
+
+  .gridline {
+    stroke: var(--chart-gridline-color, #e0e0e0);
+    stroke-opacity: var(--chart-gridline-opacity, 0.5);
+    stroke-dasharray: var(--chart-gridline-dash, 4 4);
+  }
+</style>

package/dist/_chart/Axis.svelte.d.ts

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

package/dist/_chart/ChartContainer.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { ChartContainerProperties } from './types';
+  import { onMount } from 'svelte';
+
+  let {
+    width = $bindable(0),
+    height = $bindable(0),
+    aspectRatio = 16 / 9,
+    minHeight = 0,
+    testId,
+    classes,
+    children
+  }: ChartContainerProperties = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+
+  onMount(() => {
+    if (containerEl === null) {
+      return;
+    }
+
+    function measure() {
+      if (containerEl === null) {
+        return;
+      }
+      const rect = containerEl.getBoundingClientRect();
+      const w = Math.round(rect.width);
+      width = w;
+      height = Math.max(minHeight, Math.round(w / aspectRatio));
+    }
+
+    measure();
+
+    // Coalesce bursts of resize events into a single measure per frame, always
+    // using the latest size (a leading-edge debounce would drop the final size).
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    });
+    observer.observe(containerEl);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  });
+</script>
+
+<div
+  class="chart-container {classes ?? ''}"
+  bind:this={containerEl}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  {#if width > 0 && height > 0}
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      {width}
+      {height}
+    >
+      {@render children()}
+    </svg>
+  {/if}
+</div>
+
+<style>
+  .chart-container {
+    width: 100%;
+    background: var(--chart-background, transparent);
+    font-family: var(--chart-font-family, inherit);
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+</style>