@juspay/svelte-ui-components 2.111.3 → 2.112.0

package/dist/ChipInput/ChipInput.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import Input from '../Input/Input.svelte';
+  import Pill from '../Pill/Pill.svelte';
+  import type { ChipInputProperties } from './properties';
+
+  let {
+    values = $bindable([]),
+    placeholder = 'Add value…',
+    disabled = false,
+    testId,
+    classes,
+    onadd,
+    ondismiss,
+    onchange
+  }: ChipInputProperties = $props();
+
+  let draft = $state('');
+
+  function addChip(): void {
+    const trimmed = draft.trim();
+    draft = '';
+    if (trimmed.length === 0 || values.includes(trimmed)) {
+      return;
+    }
+    values = [...values, trimmed];
+    onadd?.(trimmed);
+    onchange?.([...values]);
+  }
+
+  function removeChip(chip: string): void {
+    // values is dedup-only by construction (addChip rejects a value already present), so this
+    // component's own commit path never produces duplicates. If a caller assigns `values`
+    // directly through the bindable prop with a duplicate, remove only the first matching
+    // occurrence rather than every occurrence with that text.
+    const chipIndex = values.indexOf(chip);
+    if (chipIndex === -1) {
+      return;
+    }
+    values = [...values.slice(0, chipIndex), ...values.slice(chipIndex + 1)];
+    ondismiss?.(chip);
+    onchange?.([...values]);
+  }
+
+  function handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      addChip();
+    }
+  }
+</script>
+
+<div class="chip-input {classes ?? ''}" data-pw={testId} testID={testId}>
+  {#each values as chip (chip)}
+    <Pill
+      text={chip}
+      classes="chip-input-pill"
+      dismissible={!disabled}
+      {disabled}
+      ondismiss={() => removeChip(chip)}
+      {...typeof testId === 'string' ? { testId: `${testId}-chip` } : {}}
+    />
+  {/each}
+  <div class="chip-input-draft-wrap">
+    <Input
+      value={draft}
+      {placeholder}
+      dataType="text"
+      name=""
+      autoComplete="off"
+      actionInput={false}
+      disable={disabled}
+      classes="chip-input-draft"
+      onInput={(nextValue) => {
+        draft = nextValue;
+      }}
+      onKeyDown={handleKeyDown}
+      onBlur={addChip}
+      {...typeof testId === 'string' ? { testId: `${testId}-input` } : {}}
+    />
+  </div>
+</div>
+
+<style>
+  .chip-input {
+    display: flex;
+    flex-wrap: var(--chip-input-flex-wrap, wrap);
+    align-items: var(--chip-input-align-items, center);
+    justify-content: var(--chip-input-justify-content, flex-start);
+    gap: var(--chip-input-gap, 6px);
+    width: var(--chip-input-width, 100%);
+  }
+
+  .chip-input-draft-wrap {
+    flex: var(--chip-input-draft-flex, 0 1 auto);
+  }
+
+  .chip-input :global(.chip-input-pill) {
+    --pill-gap: var(--chip-input-pill-gap, 4px);
+    --pill-background: var(--chip-input-pill-background, #e0e0e0);
+    --pill-color: var(--chip-input-pill-color, #333333);
+    --pill-font-size: var(--chip-input-pill-font-size, 13px);
+    --pill-font-weight: var(--chip-input-pill-font-weight, 500);
+    --pill-padding: var(--chip-input-pill-padding, 6px 10px);
+    --pill-border-radius: var(--chip-input-pill-border-radius, 999px);
+    --pill-border: var(--chip-input-pill-border, none);
+    --pill-max-width: var(--chip-input-pill-max-width);
+    --pill-dismiss-size: var(--chip-input-pill-dismiss-size, 14px);
+    --pill-dismiss-color: var(--chip-input-pill-dismiss-color, currentColor);
+  }
+
+  .chip-input-draft-wrap :global(.chip-input-draft) {
+    --input-width: var(--chip-input-draft-width, 90px);
+    --input-height: var(--chip-input-draft-height, 28px);
+    --input-border: var(--chip-input-draft-border, 1px solid transparent);
+    --input-radius: var(--chip-input-draft-radius, 4px);
+    --input-focus-border: var(--chip-input-draft-focus-border, 1px solid transparent);
+    --input-padding: var(--chip-input-draft-padding, 0 2px);
+    --input-margin: 0;
+    --input-font-size: var(--chip-input-draft-font-size, 13px);
+    --input-box-shadow: none;
+  }
+</style>

package/dist/ChipInput/ChipInput.svelte.d.ts

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

package/dist/ChipInput/properties.d.ts

@@ -0,0 +1,22 @@
+export type ChipInputProperties = MandatoryChipInputProperties & OptionalChipInputProperties & ChipInputEventProperties;
+export type MandatoryChipInputProperties = {
+    /**
+     * The committed chips, in insertion order. Bindable. Dedup-only contract: the component's own
+     * commit path (`addChip`) silently drops a value already present, so ChipInput never produces
+     * duplicates itself. If a caller assigns a duplicate directly through the binding, dismiss
+     * removes only the first matching occurrence rather than every occurrence with that text.
+     */
+    values: string[];
+};
+export type OptionalChipInputProperties = {
+    placeholder?: string;
+    disabled?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type ChipInputEventProperties = {
+    onadd?: (value: string) => void;
+    ondismiss?: (value: string) => void;
+    /** Fires alongside `onadd`/`ondismiss`, after either has already updated `values`. */
+    onchange?: (values: string[]) => void;
+};

package/dist/ChipInput/properties.js

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

package/dist/IframeViewer/IframeViewer.svelte

@@ -10,6 +10,7 @@
     sandbox,
     loading,
     referrerpolicy,
+    credentialless,
     testId,
     classes,
     onMessage = () => {}
@@ -17,6 +18,10 @@
 
   let iframeEl: HTMLIFrameElement | null = $state(null);
 
+  export const postMessage = (message: unknown, targetOrigin: string): void => {
+    iframeEl?.contentWindow?.postMessage(message, targetOrigin);
+  };
+
   const messageHandler = (event: MessageEvent): void => {
     // Secure by default: forward a message only when its origin is allow-listed AND it
     // originates from the embedded iframe's own window. An empty allowedOrigins list
@@ -44,7 +49,15 @@
 
 <div class="iframe-viewer {classes ?? ''}" data-pw={testId} testID={testId}>
   {#if src}
-    <iframe bind:this={iframeEl} {src} {title} {allow} {sandbox} {loading} {referrerpolicy}
+    <iframe
+      bind:this={iframeEl}
+      {src}
+      {title}
+      {allow}
+      {sandbox}
+      {loading}
+      {referrerpolicy}
+      {...credentialless ? { credentialless: '' } : {}}
     ></iframe>
   {/if}
 </div>

package/dist/IframeViewer/IframeViewer.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { IframeViewerProperties } from './properties';
-declare const IframeViewer: import("svelte").Component<IframeViewerProperties, {}, "">;
+declare const IframeViewer: import("svelte").Component<IframeViewerProperties, {
+    postMessage: (message: unknown, targetOrigin: string) => void;
+}, "">;
 type IframeViewer = ReturnType<typeof IframeViewer>;
 export default IframeViewer;

package/dist/IframeViewer/properties.d.ts

@@ -15,6 +15,13 @@ export type OptionalIframeViewerProperties = {
     allow?: string;
     /** Value for the iframe `sandbox` attribute. Omitted when not set. */
     sandbox?: string;
+    /**
+     * Sets the iframe's `credentialless` attribute, isolating it from the embedding
+     * document's credentials/storage. Applied in the same render statement as `src` (not
+     * via a post-mount effect), so it is guaranteed to be present before the iframe's
+     * first load — no timing dependency on effect scheduling.
+     */
+    credentialless?: boolean;
     /** Loading strategy for the iframe. Omitted when not set. */
     loading?: 'eager' | 'lazy';
     /** Referrer policy for the iframe. Omitted when not set. */

package/dist/SplitInput/SplitInput.svelte

@@ -56,6 +56,32 @@
 
   // ── Input handler ───────────────────────────────────────────────
 
+  // Multi-char cleanup for the distribute paths: tel fields keep digits only
+  // (an OTP autofilled/pasted as "123-456" or "123 456" must land as 123456,
+  // never distribute a separator into a field); other dataTypes keep the old
+  // whitespace-strip behavior.
+  function sanitizeChars(config: FieldConfig, raw: string): string {
+    if ((config.dataType ?? 'text') === 'tel') {
+      return raw.replace(/\D/g, '');
+    }
+    return raw.replace(/\s/g, '');
+  }
+
+  // Single-char autoAdvance fields widen the inner Input's maxLength to the
+  // whole code length: Input's dataType='tel' sanitizer truncates an overflowing
+  // value to its LAST maxLength digits BEFORE onInput fires, so with the literal
+  // maxLength of 1 a WebOTP / Android-SMS autofill that drops the whole code
+  // into one field reached handleFieldInput as a single wrong digit and the
+  // distribute branch below could never run. One-char-per-field semantics are
+  // enforced by handleFieldInput itself, not by the inner Input.
+  function innerMaxLength(config: FieldConfig): number {
+    const configured = config.maxLength ?? 1000;
+    if (autoAdvance && configured === 1) {
+      return fieldCount;
+    }
+    return configured;
+  }
+
   function handleFieldInput(index: number, inputValue: string) {
     const config = fieldConfigs.at(index);
     if (typeof config === 'undefined') {
@@ -64,11 +90,25 @@
     const maxLen = config.maxLength ?? 1000;
 
     if (autoAdvance && maxLen === 1 && inputValue.length > 1) {
-      const chars = inputValue.replace(/\s/g, '');
-      for (let i = 0; i < fieldCount; i++) {
-        values[i] = chars.charAt(i);
+      const chars = sanitizeChars(config, inputValue);
+      if (chars.length === 0) {
+        values[index] = '';
+      } else if (index === 0 || chars.length >= fieldCount) {
+        // Autofill / OS-level insertion of a whole code: distribute from the
+        // start. Only provided characters are written — a partial string must
+        // not clear fields beyond it.
+        for (let i = 0; i < Math.min(chars.length, fieldCount); i++) {
+          values[i] = chars.charAt(i);
+        }
+        focusField(Math.min(chars.length, fieldCount) - 1);
+      } else {
+        // Overtyping an already-filled field: keep the newest character and
+        // advance, mirroring single-char entry.
+        values[index] = chars.slice(-1);
+        if (index < fieldCount - 1) {
+          focusField(index + 1);
+        }
       }
-      focusField(Math.min(chars.length, fieldCount) - 1);
     } else {
       values[index] = inputValue;
       if (autoAdvance && maxLen === 1 && inputValue.length > 0 && index < fieldCount - 1) {
@@ -111,9 +151,10 @@
     }
     e.preventDefault();
     const pasted = e.clipboardData.getData('text').trim();
+    const config = fieldConfigs.at(index);
 
-    if (autoAdvance) {
-      const chars = pasted.replace(/\s/g, '');
+    if (autoAdvance && typeof config !== 'undefined') {
+      const chars = sanitizeChars(config, pasted);
       for (let i = index; i < fieldCount; i++) {
         const charIdx = i - index;
         if (charIdx >= chars.length) {
@@ -153,7 +194,8 @@
       <Input
         value={getFieldValue(index)}
         dataType={config.dataType ?? 'text'}
-        maxLength={config.maxLength ?? 1000}
+        maxLength={innerMaxLength(config)}
+        testId={config.testId}
         min={config.min}
         max={config.max}
         placeholder={config.placeholder}

package/dist/SplitInput/properties.d.ts

@@ -1,5 +1,5 @@
 import type { OptionalInputProperties } from '../Input/properties';
-export type FieldConfig = Pick<OptionalInputProperties, 'dataType' | 'maxLength' | 'min' | 'max' | 'placeholder' | 'validationPattern' | 'validators' | 'label' | 'autoComplete' | 'inputMode'>;
+export type FieldConfig = Pick<OptionalInputProperties, 'dataType' | 'maxLength' | 'min' | 'max' | 'placeholder' | 'validationPattern' | 'validators' | 'label' | 'autoComplete' | 'inputMode' | 'testId'>;
 export type SplitInputProperties = MandatorySplitInputProperties & OptionalSplitInputProperties & SplitInputEventProperties;
 export type MandatorySplitInputProperties = {
     values: string[];

package/dist/index.d.ts

@@ -75,6 +75,7 @@ export { default as DeltaIndicator } from './DeltaIndicator/DeltaIndicator.svelt
 export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart.svelte';
 export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
+export { default as ChipInput } from './ChipInput/ChipInput.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -146,6 +147,7 @@ export type * from './DeltaIndicator/properties';
 export type * from './DualAxisBarChart/properties';
 export type * from './FunnelChart/properties';
 export type * from './ProportionBar/properties';
+export type * from './ChipInput/properties';
 export type * from './_chart/highlight';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -75,5 +75,6 @@ export { default as DeltaIndicator } from './DeltaIndicator/DeltaIndicator.svelt
 export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart.svelte';
 export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
+export { default as ChipInput } from './ChipInput/ChipInput.svelte';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

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