@juspay/svelte-ui-components 2.56.0 → 2.58.0

package/dist/Input/Input.svelte

@@ -39,7 +39,15 @@
     ariaExpanded,
     ariaAutocomplete,
     ariaControls,
-    ariaActivedescendant
+    ariaActivedescendant,
+    leftIcon,
+    rightIcon,
+    onLeftIconClick,
+    onRightIconClick,
+    leftIconLabel = 'Leading action',
+    rightIconLabel = 'Trailing action',
+    mandatory = false,
+    forceError = false
   }: InputProperties = $props();
 
   export function focus() {
@@ -90,6 +98,11 @@
   });
 
   const showErrorMessage = $derived(validationState === 'Invalid');
+  // forceError lets consumers drive the error border from server/runtime validation,
+  // independent of validationPattern.
+  const showError = $derived(showErrorMessage || forceError);
+  const hasLeftIcon = $derived(typeof leftIcon === 'function');
+  const hasRightIcon = $derived(typeof rightIcon === 'function');
 
   function handleOnInput(event: Event) {
     if (inputElement === null) {
@@ -192,68 +205,113 @@
   }
 </script>
 
-<div class="input-container {classes ?? ''}" class:input-error={showErrorMessage && !actionInput}>
+<div class="input-container {classes ?? ''}" class:input-error={showError && !actionInput}>
   {#if typeof label === 'string' && label !== '' && !actionInput}
     <label class="label" for={name}>
-      {label}
+      {label}{#if mandatory}<span class="input-mandatory-asterisk" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
-  {#if useTextArea}
-    <!-- svelte-ignore element_invalid_self_closing_tag -->
-    <textarea
-      {value}
-      {placeholder}
-      autocomplete={autoComplete}
-      {name}
-      {role}
-      aria-expanded={ariaExpanded}
-      aria-autocomplete={ariaAutocomplete}
-      aria-controls={ariaControls}
-      aria-activedescendant={ariaActivedescendant}
-      onfocus={onFocus}
-      onfocusout={_onFocusOut}
-      oninput={handleOnInput}
-      onpaste={handleOnPaste}
-      onclick={onClick}
-      onkeydown={onKeyDown}
-      class:action-input={actionInput}
-      style="--focus-border: {addFocusColor ? 1 : 0}px;"
-      disabled={disable}
-      bind:this={inputElement}
-      maxlength={dataType === 'tel' ? null : maxLength}
-      minlength={minLength}
-    />
+  {#snippet fieldElement()}
+    {#if useTextArea}
+      <textarea
+        {value}
+        {placeholder}
+        autocomplete={autoComplete}
+        {name}
+        {role}
+        aria-expanded={ariaExpanded}
+        aria-autocomplete={ariaAutocomplete}
+        aria-controls={ariaControls}
+        aria-activedescendant={ariaActivedescendant}
+        aria-required={mandatory || null}
+        required={mandatory || null}
+        onfocus={onFocus}
+        onfocusout={_onFocusOut}
+        oninput={handleOnInput}
+        onpaste={handleOnPaste}
+        onclick={onClick}
+        onkeydown={onKeyDown}
+        class:action-input={actionInput}
+        style="--focus-border: {addFocusColor ? 1 : 0}px;"
+        disabled={disable}
+        bind:this={inputElement}
+        maxlength={dataType === 'tel' ? null : maxLength}
+        minlength={minLength}
+      ></textarea>
+    {:else}
+      <input
+        type={dataType}
+        {value}
+        {placeholder}
+        autocomplete={autoComplete}
+        {name}
+        {role}
+        aria-expanded={ariaExpanded}
+        aria-autocomplete={ariaAutocomplete}
+        aria-controls={ariaControls}
+        aria-activedescendant={ariaActivedescendant}
+        aria-required={mandatory || null}
+        required={mandatory || null}
+        onfocus={onFocus}
+        onfocusout={_onFocusOut}
+        oninput={handleOnInput}
+        onpaste={handleOnPaste}
+        onclick={onClick}
+        onkeydown={onKeyDown}
+        data-pw={testId}
+        class:action-input={actionInput}
+        disabled={disable}
+        bind:this={inputElement}
+        maxlength={dataType === 'tel' ? null : maxLength}
+        minlength={minLength}
+        {min}
+        {max}
+      />
+    {/if}
+  {/snippet}
+
+  {#if hasLeftIcon || hasRightIcon}
+    <div
+      class="input-field-wrap"
+      class:has-left-icon={hasLeftIcon}
+      class:has-right-icon={hasRightIcon}
+    >
+      {#if hasLeftIcon}
+        {#if onLeftIconClick}
+          <button
+            type="button"
+            class="input-icon input-icon-left input-icon-button"
+            aria-label={leftIconLabel}
+            onclick={onLeftIconClick}
+          >
+            {@render leftIcon?.()}
+          </button>
+        {:else}
+          <span class="input-icon input-icon-left">{@render leftIcon?.()}</span>
+        {/if}
+      {/if}
+      {@render fieldElement()}
+      {#if hasRightIcon}
+        {#if onRightIconClick}
+          <button
+            type="button"
+            class="input-icon input-icon-right input-icon-button"
+            aria-label={rightIconLabel}
+            onclick={onRightIconClick}
+          >
+            {@render rightIcon?.()}
+          </button>
+        {:else}
+          <span class="input-icon input-icon-right">{@render rightIcon?.()}</span>
+        {/if}
+      {/if}
+    </div>
   {:else}
-    <input
-      type={dataType}
-      {value}
-      {placeholder}
-      autocomplete={autoComplete}
-      {name}
-      {role}
-      aria-expanded={ariaExpanded}
-      aria-autocomplete={ariaAutocomplete}
-      aria-controls={ariaControls}
-      aria-activedescendant={ariaActivedescendant}
-      onfocus={onFocus}
-      onfocusout={_onFocusOut}
-      oninput={handleOnInput}
-      onpaste={handleOnPaste}
-      onclick={onClick}
-      onkeydown={onKeyDown}
-      data-pw={testId}
-      class:action-input={actionInput}
-      disabled={disable}
-      bind:this={inputElement}
-      maxlength={dataType === 'tel' ? null : maxLength}
-      minlength={minLength}
-      {min}
-      {max}
-    />
+    {@render fieldElement()}
   {/if}
 
-  {#if onErrorMessage !== '' && showErrorMessage && !actionInput}
+  {#if onErrorMessage !== '' && showError && !actionInput}
     <div class="error-message">
       {onErrorMessage}
     </div>
@@ -327,6 +385,71 @@
     padding: var(--input-label-msg-padding);
   }
 
+  .input-mandatory-asterisk {
+    color: var(--input-mandatory-color, var(--input-error-msg-text-color, #fa1405));
+    margin-left: var(--input-mandatory-gap, 2px);
+  }
+
+  /* Icon wrapper: only rendered when leftIcon/rightIcon is supplied, so non-icon
+     consumers keep the exact prior DOM. The field's bottom margin moves to the
+     wrap so the absolutely-positioned icons centre on the field, not the margin. */
+  .input-field-wrap {
+    position: relative;
+    display: block;
+    margin: var(--input-margin, 0px 0px 12px 0px);
+  }
+
+  .input-field-wrap > :global(textarea),
+  .input-field-wrap > :global(input) {
+    margin: 0 !important;
+    width: var(--input-width, 100%);
+  }
+
+  .input-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--input-icon-size, 20px);
+    height: var(--input-icon-size, 20px);
+    color: var(--input-icon-color, inherit);
+    pointer-events: none;
+  }
+
+  .input-icon-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .input-icon-button:focus-visible {
+    outline: var(--input-icon-focus-outline, 2px solid var(--input-focus-border-color, #005fcc));
+    outline-offset: var(--input-icon-focus-outline-offset, 2px);
+    border-radius: var(--input-icon-focus-radius, 2px);
+  }
+
+  .input-icon-left {
+    left: var(--input-icon-gap, 12px);
+  }
+
+  .input-icon-right {
+    right: var(--input-icon-gap, 12px);
+  }
+
+  .input-field-wrap.has-left-icon > :global(textarea),
+  .input-field-wrap.has-left-icon > :global(input) {
+    padding-left: calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);
+  }
+
+  .input-field-wrap.has-right-icon > :global(textarea),
+  .input-field-wrap.has-right-icon > :global(input) {
+    padding-right: calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);
+  }
+
   .error-message {
     font-weight: var(--input-error-msg-text-weight, 400);
     font-size: var(--input-error-msg-text-size, 12px);

package/dist/Input/properties.d.ts

@@ -1,5 +1,6 @@
 import type { CustomValidator, InputDataType, TextTransformer, ValidationState } from '../types';
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
 export type InputProperties = OptionalInputProperties & InputEventProperties & MandatoryInputProperties;
 export type MandatoryInputProperties = {
     value: string;
@@ -32,6 +33,22 @@ export type OptionalInputProperties = {
     ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both';
     ariaControls?: string | null;
     ariaActivedescendant?: string | null;
+    /** Passive/clickable icon rendered inside the field on the leading edge (e.g. a search icon). */
+    leftIcon?: Snippet;
+    /** Passive/clickable icon rendered inside the field on the trailing edge (e.g. a clear button). */
+    rightIcon?: Snippet;
+    /** When set, the leftIcon becomes a focusable button invoking this handler. */
+    onLeftIconClick?: () => void;
+    /** When set, the rightIcon becomes a focusable button invoking this handler. */
+    onRightIconClick?: () => void;
+    /** Accessible label for the clickable leftIcon button (defaults to a generic label). */
+    leftIconLabel?: string;
+    /** Accessible label for the clickable rightIcon button (defaults to a generic label). */
+    rightIconLabel?: string;
+    /** Appends a required asterisk beside the label and sets aria-required on the field. */
+    mandatory?: boolean;
+    /** Forces the error border independent of validationPattern (server/runtime-driven errors). */
+    forceError?: boolean;
 };
 export type InputEventProperties = {
     onInput?: (value: string, event: Event) => void;

package/dist/SankeyChart/SankeyChart.svelte

@@ -5,7 +5,7 @@
   import { computeSankeyLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
-  import { SvelteSet } from 'svelte/reactivity';
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -26,7 +26,9 @@
     onnodehover,
     onlinkhover,
     testId,
-    classes
+    classes,
+    columnLabels,
+    nodeColorResolver
   }: SankeyChartProperties = $props();
 
   // ── State ──────────────────────────────────────────────────────
@@ -56,6 +58,45 @@
     )
   );
 
+  /**
+   * Pre-computed colour map for all nodes. Keyed by node id. Computed once per layout
+   * change rather than re-running find() + indexOf() for every link on every render.
+   *
+   * Note: nodeColorResolver also controls link stroke colours (links inherit source-node
+   * colour), not just node fill colours. See Props docs for full description.
+   */
+  let nodeColorMap = $derived.by(() => {
+    const map = new SvelteMap<string, string>();
+    for (let ni = 0; ni < layout.nodes.length; ni++) {
+      const node = layout.nodes[ni];
+      const color = node.color ?? nodeColorResolver?.(node.id, node.label ?? null) ?? getColor(ni);
+      map.set(node.id, color);
+    }
+    return map;
+  });
+
+  // Column count and width — used by columnLabels rendering
+  let columnCount = $derived(
+    layout.nodes.length > 0 ? Math.max(...layout.nodes.map((n) => n.column)) + 1 : 0
+  );
+  let colWidth = $derived(
+    columnCount <= 1
+      ? Math.max(0, chartWidth - MARGIN * 2)
+      : (Math.max(0, chartWidth - MARGIN * 2) - nodeWidth) / (columnCount - 1)
+  );
+
+  // ── Helpers ────────────────────────────────────────────────────
+
+  /** Percentage of source node's total value carried by a link (0–100, 2 dp). */
+  const computeLinkPct = (sourceId: string, linkValue: number): number => {
+    const sourceNode = layout.nodes.find((nd) => nd.id === sourceId);
+    if (!sourceNode) {
+      return 0;
+    }
+    const sourceTotal = sourceNode.value;
+    return sourceTotal > 0 ? Math.round((linkValue / sourceTotal) * 10000) / 100 : 0;
+  };
+
   let connectedNodes = $derived.by(() => {
     if (hoveredNode !== null) {
       const connected = new SvelteSet<string>([hoveredNode]);
@@ -75,6 +116,27 @@
 
   // ── Tooltip ────────────────────────────────────────────────────
 
+  /**
+   * Pre-computed link tooltip data for the currently hovered link. Computed once and shared
+   * by both `tooltipData` and `tooltipContext` to avoid running the O(n) percentage lookup
+   * twice on every hover state change.
+   */
+  let hoveredLinkCache = $derived.by(() => {
+    if (hoveredLink === null) {
+      return null;
+    }
+    const l = links.find(
+      (lk) => lk.source === hoveredLink!.source && lk.target === hoveredLink!.target
+    );
+    if (!l) {
+      return null;
+    }
+    const sourceLabelText = nodes.find((nd) => nd.id === l.source)?.label ?? l.source;
+    const targetLabelText = nodes.find((nd) => nd.id === l.target)?.label ?? l.target;
+    const pct = computeLinkPct(l.source, l.value);
+    return { link: l, sourceLabel: sourceLabelText, targetLabel: targetLabelText, percentage: pct };
+  });
+
   let tooltipData = $derived.by(() => {
     if (hoveredNode !== null) {
       const n = layout.nodes.find((nd) => nd.id === hoveredNode);
@@ -92,16 +154,14 @@
         ]
       };
     }
-    if (hoveredLink !== null) {
-      const l = links.find(
-        (lk) => lk.source === hoveredLink!.source && lk.target === hoveredLink!.target
-      );
-      if (!l) {
-        return null;
-      }
+    if (hoveredLinkCache !== null) {
+      const { link: l, sourceLabel, targetLabel, percentage: pct } = hoveredLinkCache;
       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) }]
+        title: `${sourceLabel} → ${targetLabel}`,
+        items: [
+          { label: 'Flow', value: format(l.value) },
+          { label: 'of source', value: `${pct.toFixed(2)}%` }
+        ]
       };
     }
     return null;
@@ -116,12 +176,15 @@
       }
       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 };
+    if (hoveredLinkCache !== null) {
+      const { link: l, sourceLabel, targetLabel, percentage: pct } = hoveredLinkCache;
+      return {
+        type: 'link',
+        link: l,
+        sourceLabel,
+        targetLabel,
+        percentage: pct
+      };
     }
     return null;
   });
@@ -208,6 +271,18 @@
   {:else}
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
       <g transform="translate({MARGIN}, {MARGIN})">
+        {#if columnLabels != null && columnLabels.length > 0}
+          {#each columnLabels as label, ci (ci)}
+            <text
+              class="sankey-col-label"
+              x={ci * colWidth + nodeWidth / 2}
+              y={-8}
+              text-anchor="middle"
+              dominant-baseline="auto">{label}</text
+            >
+          {/each}
+        {/if}
+
         {#each layout.links as link, i (i)}
           {@const highlighted = isLinkHighlighted(link.source, link.target)}
           {@const dimmed = (hoveredNode !== null || hoveredLink !== null) && !highlighted}
@@ -217,7 +292,7 @@
             class="sankey-link"
             d={link.path}
             fill="none"
-            stroke={link.color ?? getColor(layout.nodes.findIndex((n) => n.id === link.source))}
+            stroke={link.color ?? nodeColorMap.get(link.source) ?? getColor(0)}
             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)}
@@ -228,7 +303,7 @@
         {/each}
 
         {#each layout.nodes as node, ni (ni)}
-          {@const color = node.color ?? getColor(ni)}
+          {@const color = nodeColorMap.get(node.id) ?? 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 -->
@@ -296,6 +371,12 @@
     pointer-events: none;
     transition: opacity var(--chart-transition-duration, 0.2s) ease;
   }
+  .sankey-col-label {
+    fill: var(--sankey-col-label-color, #666);
+    font-size: var(--sankey-col-label-font-size, 11px);
+    font-family: var(--chart-font-family, inherit);
+    pointer-events: none;
+  }
   .sankey-label.node-dimmed {
     opacity: var(--sankey-dimmed-opacity, 0.15);
   }

package/dist/SankeyChart/properties.d.ts

@@ -10,6 +10,14 @@ export type SankeyLink = {
     value: number;
     color?: string;
 };
+/**
+ * Context passed to the `tooltipSnippet` prop on each hover event.
+ *
+ * The `'link'` branch gained three new optional fields (`sourceLabel`, `targetLabel`,
+ * `percentage`) in this release. They are always populated by the chart — the fields are
+ * typed optional so that existing consumer code that typed a variable explicitly as
+ * `{ type: 'link'; link: SankeyLink }` continues to compile without changes.
+ */
 export type SankeyTooltipContext = {
     type: 'node';
     node: SankeyNode;
@@ -17,6 +25,12 @@ export type SankeyTooltipContext = {
 } | {
     type: 'link';
     link: SankeyLink;
+    /** Human-readable label of the source node (falls back to node id when label is undefined). Always present at runtime. */
+    sourceLabel?: string;
+    /** Human-readable label of the target node (falls back to node id when label is undefined). Always present at runtime. */
+    targetLabel?: string;
+    /** link.value as a percentage of the source node's total outgoing value (0–100, rounded to 2 dp). Always present at runtime. */
+    percentage?: number;
 };
 export type SankeyChartProperties = MandatorySankeyChartProperties & OptionalSankeyChartProperties & SankeyChartEventProperties;
 export type MandatorySankeyChartProperties = {
@@ -35,6 +49,14 @@ export type OptionalSankeyChartProperties = {
     empty?: Snippet;
     testId?: string;
     classes?: string;
+    /** Labels rendered above each column, indexed by column position (0-based). */
+    columnLabels?: string[];
+    /**
+     * Called for each node and also for link strokes (links inherit the resolved source-node
+     * colour). Return a CSS colour string to override the default palette, or `null` to fall
+     * through to the default palette colour.
+     */
+    nodeColorResolver?: (id: string, label: string | null) => string | null;
 };
 export type SankeyChartEventProperties = {
     onnodeclick?: (event: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.56.0",
+  "version": "2.58.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",