@juspay/svelte-ui-components 2.136.9 → 2.136.11

package/dist/FunnelChart/properties.d.ts

@@ -57,7 +57,8 @@ export type OptionalFunnelChartProperties = {
     aspectRatio?: number;
     /**
      * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
-     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     * can't balloon on wide surfaces. Defaults to `DEFAULT_CHART_MAX_HEIGHT` (420), the
+     * same cap every other chart in this library applies.
      */
     maxHeight?: number;
     /** Lower bound (px) on the rendered chart height (defaults to `0`). */

package/dist/Img/Img.svelte

@@ -37,6 +37,107 @@
     transform: ((svg: string) => string) | null;
   };
 
+  // Root attributes that may be copied from fetched SVG markup onto the live
+  // <svg> host. The fetched document is remote, untrusted content — copying
+  // every attribute (the previous behaviour) let it plant executable `on*`
+  // handlers on an element in the host page, clobber the data-pw/testID test
+  // hooks, or override the component's CSS sizing contract with an inline
+  // style. An allowlist rather than an `on*` denylist is deliberate: a
+  // denylist misses vectors like `xlink:href="javascript:…"` and whatever
+  // attribute ships in browsers next. The names kept are what inlining
+  // actually needs — geometry/scaling, the namespace declarations exporters
+  // emit, the inheritable paint attributes that keep the icon's authored
+  // defaults while page CSS/currentColor themes it, and the accessibility
+  // metadata real icon sets ship (role, focusable, aria-*). `class` stays
+  // caller-owned via the `classes` prop, as before. Compared lowercased, so
+  // entries are lowercase (viewBox → 'viewbox') while the authored casing is
+  // preserved when the attribute is written to the host.
+  const SAFE_INLINE_ROOT_ATTRIBUTES: ReadonlySet<string> = new Set([
+    'xmlns',
+    'xmlns:xlink',
+    'viewbox',
+    'width',
+    'height',
+    'x',
+    'y',
+    'preserveaspectratio',
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'stroke',
+    'stroke-width',
+    'stroke-opacity',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'clip-rule',
+    'color',
+    'opacity',
+    'overflow',
+    'role',
+    'focusable'
+  ]);
+
+  function isSafeInlineRootAttribute(lowerCaseName: string): boolean {
+    return SAFE_INLINE_ROOT_ATTRIBUTES.has(lowerCaseName) || lowerCaseName.startsWith('aria-');
+  }
+
+  /**
+   * Strips executable content from a fetched SVG's descendants.
+   *
+   * The root allowlist above only guards the root. Children are adopted into
+   * the live document wholesale, and an event-handler content attribute
+   * becomes a live handler the moment its element is adopted — so
+   * `<image onerror="…">` two levels down runs exactly like `onerror` on the
+   * root would. A root-only guard would look like a fix while leaving the same
+   * vector open one element deeper.
+   *
+   * A denylist rather than an allowlist here, deliberately: descendants
+   * legitimately carry the entire SVG geometry and paint vocabulary (`d`,
+   * `transform`, `gradientUnits`, …), so enumerating what is permitted would
+   * break real artwork. What is dangerous is narrow and well understood:
+   * scripting elements, `on*` handlers, and URL attributes pointing at
+   * `javascript:`.
+   */
+  function sanitizeInlinedSubtree(root: SVGSVGElement): void {
+    for (const element of Array.from(root.querySelectorAll('script, foreignObject'))) {
+      element.remove();
+    }
+    for (const element of Array.from(root.querySelectorAll('*'))) {
+      for (const attribute of Array.from(element.attributes)) {
+        const name = attribute.name.toLowerCase();
+        if (name.startsWith('on')) {
+          element.removeAttribute(attribute.name);
+          continue;
+        }
+        // `href`, `xlink:href` and `src` accept a javascript: URL, which runs
+        // on activation of an <a> wrapper or on load of a nested resource.
+        const isUrlAttribute = name === 'href' || name === 'xlink:href' || name === 'src';
+        if (isUrlAttribute && /^\s*javascript:/i.test(attribute.value)) {
+          element.removeAttribute(attribute.name);
+        }
+      }
+    }
+  }
+
+  // Root attribute names of the raw fetched markup, lowercased — or null when
+  // that markup does not parse as SVG on its own. Distinguishes what arrived
+  // over the network (untrusted, the allowlist applies) from what the caller's
+  // transformSvg hook added (caller intent, passes through).
+  function collectRootAttributeNames(markup: string): ReadonlySet<string> | null {
+    const parsed = new DOMParser().parseFromString(markup, 'image/svg+xml');
+    if (parsed.querySelector('parsererror') !== null) {
+      return null;
+    }
+    const root = parsed.querySelector('svg');
+    if (root === null) {
+      return null;
+    }
+    return new Set(Array.from(root.attributes, (attribute) => attribute.name.toLowerCase()));
+  }
+
   async function loadInlineSvg(
     host: SVGSVGElement,
     url: string,
@@ -50,7 +151,8 @@
         return;
       }
       const rawSvg = await response.text();
-      const markup = typeof transform === 'function' ? transform(rawSvg) : rawSvg;
+      const hasTransform = typeof transform === 'function';
+      const markup = hasTransform ? transform(rawSvg) : rawSvg;
       const parsed = new DOMParser().parseFromString(markup, 'image/svg+xml');
       if (parsed.querySelector('parsererror') !== null) {
         failedInlineSrc = url;
@@ -70,12 +172,26 @@
       while (host.firstChild !== null) {
         host.removeChild(host.firstChild);
       }
+      // With no transform the parsed root IS the fetched root, so every name
+      // is network-supplied and only the allowlist applies. With a transform,
+      // names absent from the raw payload were added by the caller's own hook
+      // and pass through; if the raw payload only parses after the transform,
+      // nothing can be attributed to the caller and the allowlist applies to
+      // everything.
+      const fetchedRootNames = hasTransform ? collectRootAttributeNames(rawSvg) : null;
       for (const attribute of Array.from(sourceSvg.attributes)) {
-        if (attribute.name === 'class') {
+        const name = attribute.name.toLowerCase();
+        if (name === 'class') {
           continue;
         }
-        host.setAttribute(attribute.name, attribute.value);
+        const addedByTransform = fetchedRootNames !== null && !fetchedRootNames.has(name);
+        if (isSafeInlineRootAttribute(name) || addedByTransform) {
+          host.setAttribute(attribute.name, attribute.value);
+        }
       }
+      // Before adoption, not after: an event-handler attribute becomes a live
+      // handler as soon as its element enters the document.
+      sanitizeInlinedSubtree(sourceSvg);
       while (sourceSvg.firstChild !== null) {
         host.appendChild(sourceSvg.firstChild);
       }

package/dist/SplitInput/SplitInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import Input from '../Input/Input.svelte';
   import type { FieldConfig, SplitInputProperties } from './properties';
 
@@ -37,6 +38,31 @@
     return values.at(index) ?? '';
   }
 
+  /**
+   * Writes the resolved state back onto the DOM element.
+   *
+   * Needed because the element can hold a value the state never had. Typing
+   * into a filled field produces a two-character string in the DOM, and when
+   * the character we resolve out of it happens to equal what was already
+   * stored -- overtyping 2 with another 2 -- the assignment is a no-op, Svelte
+   * sees no change, and nothing re-renders. The field is then left displaying
+   * "22" indefinitely while the state says "2".
+   */
+  async function syncFieldElement(index: number) {
+    // After the pending render, not before it: writing during the input handler
+    // is undone when Svelte flushes, and when the resolved value is unchanged
+    // there is no flush to piggyback on -- so the correction has to come last.
+    await tick();
+    const element = inputRefs.at(index)?.getInputRef();
+    if (element === null || typeof element === 'undefined') {
+      return;
+    }
+    const resolved = getFieldValue(index);
+    if (element.value !== resolved) {
+      element.value = resolved;
+    }
+  }
+
   function commitValues() {
     const filled = values.filter((v) => v.length > 0);
     oninput?.([...values]);
@@ -104,7 +130,19 @@
       } else {
         // Overtyping an already-filled field: keep the newest character and
         // advance, mirroring single-char entry.
-        values[index] = chars.slice(-1);
+        //
+        // Which character is "newest" cannot be assumed to be the last one.
+        // The browser inserts at the caret, and where the caret sits after a
+        // click on a filled single-character field is platform-dependent:
+        // Chromium on macOS puts it after the character, Chromium on Linux
+        // before it. So typing 7 into a field holding 2 yields "27" on one and
+        // "72" on the other, and slice(-1) silently picks the *old* digit on
+        // Linux. Removing one occurrence of the previous value identifies the
+        // newly typed character wherever it landed.
+        const previous = getFieldValue(index);
+        const remainder = previous.length === 1 ? chars.replace(previous, '') : '';
+        values[index] = remainder.length > 0 ? remainder.slice(-1) : chars.slice(-1);
+        void syncFieldElement(index);
         if (index < fieldCount - 1) {
           focusField(index + 1);
         }

package/dist-wc/index.js

@@ -3477,7 +3477,7 @@ function create_custom_element(e, t, n, i, a, o) {
 }
 //#endregion
 //#region src/lib/Img/Img.svelte
-var root$88 = /* @__PURE__ */ from_svg("<svg></svg>"), root_1$75 = /* @__PURE__ */ from_html("<img/>"), $$css$85 = {
+var root_1$75 = /* @__PURE__ */ from_svg("<svg></svg>"), root_2$57 = /* @__PURE__ */ from_html("<img/>"), $$css$85 = {
 	hash: "svelte-13ogpty",
 	code: "img.svelte-13ogpty,\n  svg.svelte-13ogpty {object-fit:var(--image-object-fit);height:var(--image-height, 24px);width:var(--image-width, 24px);padding:var(--image-padding, 0px);border-radius:var(--image-border-radius, 0px);margin:var(--image-margin, 0px);filter:var(--image-filter, none);background:var(--image-background);border:var(--image-border);transition:var(--image-transition);}img.svelte-13ogpty:hover,\n  svg.svelte-13ogpty:hover {background:var(--image-hover-background, var(--image-background));border:var(--image-hover-border, var(--image-border));}"
 };
@@ -3491,35 +3491,88 @@ function Img(e, t) {
 	function C() {
 		typeof a() == "string" && a().length > 0 && get(f) !== a() ? set(f, a()) : o()?.();
 	}
-	async function k(e, t, n, i) {
+	let k = new Set([
+		"xmlns",
+		"xmlns:xlink",
+		"viewbox",
+		"width",
+		"height",
+		"x",
+		"y",
+		"preserveaspectratio",
+		"fill",
+		"fill-opacity",
+		"fill-rule",
+		"stroke",
+		"stroke-width",
+		"stroke-opacity",
+		"stroke-linecap",
+		"stroke-linejoin",
+		"stroke-miterlimit",
+		"stroke-dasharray",
+		"stroke-dashoffset",
+		"clip-rule",
+		"color",
+		"opacity",
+		"overflow",
+		"role",
+		"focusable"
+	]);
+	function R(e) {
+		return k.has(e) || e.startsWith("aria-");
+	}
+	function G(e) {
+		for (let t of Array.from(e.querySelectorAll("script, foreignObject"))) t.remove();
+		for (let t of Array.from(e.querySelectorAll("*"))) for (let e of Array.from(t.attributes)) {
+			let n = e.name.toLowerCase();
+			if (n.startsWith("on")) {
+				t.removeAttribute(e.name);
+				continue;
+			}
+			(n === "href" || n === "xlink:href" || n === "src") && /^\s*javascript:/i.test(e.value) && t.removeAttribute(e.name);
+		}
+	}
+	function te(e) {
+		let t = new DOMParser().parseFromString(e, "image/svg+xml");
+		if (t.querySelector("parsererror") !== null) return null;
+		let n = t.querySelector("svg");
+		return n === null ? null : new Set(Array.from(n.attributes, (e) => e.name.toLowerCase()));
+	}
+	async function ne(e, t, n, i) {
 		try {
 			let a = await fetch(t, { signal: i });
 			if (!a.ok) {
 				set(p, t, !0);
 				return;
 			}
-			let o = await a.text(), s = typeof n == "function" ? n(o) : o, c = new DOMParser().parseFromString(s, "image/svg+xml");
-			if (c.querySelector("parsererror") !== null) {
+			let o = await a.text(), s = typeof n == "function", c = s ? n(o) : o, l = new DOMParser().parseFromString(c, "image/svg+xml");
+			if (l.querySelector("parsererror") !== null) {
 				set(p, t, !0);
 				return;
 			}
-			let l = c.querySelector("svg");
-			if (l === null) {
+			let u = l.querySelector("svg");
+			if (u === null) {
 				set(p, t, !0);
 				return;
 			}
 			if (i.aborted) return;
 			for (; e.firstChild !== null;) e.removeChild(e.firstChild);
-			for (let t of Array.from(l.attributes)) t.name !== "class" && e.setAttribute(t.name, t.value);
-			for (; l.firstChild !== null;) e.appendChild(l.firstChild);
+			let f = s ? te(o) : null;
+			for (let t of Array.from(u.attributes)) {
+				let n = t.name.toLowerCase();
+				if (n === "class") continue;
+				let i = f !== null && !f.has(n);
+				(R(n) || i) && e.setAttribute(t.name, t.value);
+			}
+			for (G(u); u.firstChild !== null;) e.appendChild(u.firstChild);
 		} catch {
 			i.aborted || set(p, t, !0);
 		}
 	}
-	function R(e, t) {
+	function re(e, t) {
 		let n = new AbortController();
 		function i(t) {
-			n.abort(), n = new AbortController(), k(e, t.url, t.transform, n.signal);
+			n.abort(), n = new AbortController(), ne(e, t.url, t.transform, n.signal);
 		}
 		return i(t), {
 			update(e) {
@@ -3530,7 +3583,7 @@ function Img(e, t) {
 			}
 		};
 	}
-	var G = {
+	var be = {
 		get src() {
 			return n();
 		},
@@ -3579,23 +3632,23 @@ function Img(e, t) {
 		set testId(e) {
 			u(e), flushSync();
 		}
-	}, te = comment(), ne = first_child(te), re = (e) => {
-		var t = root$88();
-		action(t, (e, t) => R?.(e, t), () => ({
+	}, Me = comment(), Re = first_child(Me), Ue = (e) => {
+		var t = root_1$75();
+		action(t, (e, t) => re?.(e, t), () => ({
 			url: get(f),
 			transform: l() ?? null
 		})), template_effect(() => {
 			set_class(t, 0, clsx(s() ?? ""), "svelte-13ogpty"), set_attribute(t, "role", i().length > 0 ? "img" : null), set_attribute(t, "aria-label", i().length > 0 ? i() : null), set_attribute(t, "aria-hidden", i().length === 0 ? "true" : null), set_attribute(t, "data-pw", u()), set_attribute(t, "testID", u());
 		}), append(e, t);
-	}, be = (e) => {
-		var t = root_1$75();
+	}, it = (e) => {
+		var t = root_2$57();
 		template_effect(() => {
 			set_class(t, 1, clsx(s() ?? ""), "svelte-13ogpty"), set_attribute(t, "src", get(f)), set_attribute(t, "alt", i()), set_attribute(t, "data-pw", u()), set_attribute(t, "testid", u());
 		}), event("error", t, C), replay_events(t), append(e, t);
 	};
-	return if_block(ne, (e) => {
-		get(S) ? e(re) : e(be, -1);
-	}), append(e, te), pop(G);
+	return if_block(Re, (e) => {
+		get(S) ? e(Ue) : e(it, -1);
+	}), append(e, Me), pop(be);
 }
 create_custom_element(Img, {
 	src: {},
@@ -7050,62 +7103,72 @@ function SplitInput(e, t) {
 	function R(e) {
 		return n().at(e) ?? "";
 	}
-	function G() {
+	async function G(e) {
+		await tick();
+		let t = get(k).at(e)?.getInputRef();
+		if (t == null) return;
+		let n = R(e);
+		t.value !== n && (t.value = n);
+	}
+	function te() {
 		let e = n().filter((e) => e.length > 0);
 		p()?.([...n()]), f()?.([...n()]), e.length === get(S) && h()?.([...n()]);
 	}
-	function te(e) {
+	function ne(e) {
 		e >= 0 && e < get(S) && get(k).at(e)?.focus();
 	}
-	function ne(e, t) {
+	function re(e, t) {
 		return (e.dataType ?? "text") === "tel" ? t.replace(/\D/g, "") : t.replace(/\s/g, "");
 	}
-	function re(e) {
+	function be(e) {
 		let t = e.maxLength ?? 1e3;
 		return s() && t === 1 ? get(S) : t;
 	}
-	function be(e, t) {
+	function Me(e, t) {
 		let i = get(C).at(e);
 		if (i === void 0) return;
 		let a = i.maxLength ?? 1e3;
 		if (s() && a === 1 && t.length > 1) {
-			let a = ne(i, t);
+			let a = re(i, t);
 			if (a.length === 0) n(n()[e] = "", !0);
 			else if (e === 0 || a.length >= get(S)) {
 				for (let e = 0; e < Math.min(a.length, get(S)); e++) n(n()[e] = a.charAt(e), !0);
-				te(Math.min(a.length, get(S)) - 1);
-			} else n(n()[e] = a.slice(-1), !0), e < get(S) - 1 && te(e + 1);
-		} else n(n()[e] = t, !0), s() && a === 1 && t.length > 0 && e < get(S) - 1 && te(e + 1);
-		G();
-	}
-	function Me(e, t) {
-		e.key === "Backspace" ? R(t).length === 0 && t > 0 && (n(n()[t - 1] = "", !0), te(t - 1), G()) : e.key === "ArrowLeft" && t > 0 ? te(t - 1) : e.key === "ArrowRight" && t < get(S) - 1 ? te(t + 1) : e.key === "Tab" && (e.shiftKey && t > 0 ? (e.preventDefault(), te(t - 1)) : e.shiftKey === !1 && t < get(S) - 1 && (e.preventDefault(), te(t + 1)));
+				ne(Math.min(a.length, get(S)) - 1);
+			} else {
+				let t = R(e), i = t.length === 1 ? a.replace(t, "") : "";
+				n(n()[e] = i.length > 0 ? i.slice(-1) : a.slice(-1), !0), G(e), e < get(S) - 1 && ne(e + 1);
+			}
+		} else n(n()[e] = t, !0), s() && a === 1 && t.length > 0 && e < get(S) - 1 && ne(e + 1);
+		te();
 	}
 	function Re(e, t) {
+		e.key === "Backspace" ? R(t).length === 0 && t > 0 && (n(n()[t - 1] = "", !0), ne(t - 1), te()) : e.key === "ArrowLeft" && t > 0 ? ne(t - 1) : e.key === "ArrowRight" && t < get(S) - 1 ? ne(t + 1) : e.key === "Tab" && (e.shiftKey && t > 0 ? (e.preventDefault(), ne(t - 1)) : e.shiftKey === !1 && t < get(S) - 1 && (e.preventDefault(), ne(t + 1)));
+	}
+	function Ue(e, t) {
 		if (e.clipboardData === null) return;
 		e.preventDefault();
 		let i = e.clipboardData.getData("text").trim(), a = get(C).at(t);
 		if (s() && a !== void 0) {
-			let e = ne(a, i);
+			let e = re(a, i);
 			for (let i = t; i < get(S); i++) {
 				let a = i - t;
 				if (a >= e.length) break;
 				n(n()[i] = e.charAt(a), !0);
 			}
-			te(Math.min(t + e.length, get(S)) - 1);
+			ne(Math.min(t + e.length, get(S)) - 1);
 		} else n(n()[t] = i, !0);
-		G();
+		te();
 	}
-	function Ue() {
+	function it() {
 		for (let e = 0; e < get(S); e++) n(n()[e] = "", !0);
-		p()?.([...n()]), f()?.([...n()]), te(0);
+		p()?.([...n()]), f()?.([...n()]), ne(0);
 	}
-	function it() {
-		te(0);
+	function at() {
+		ne(0);
 	}
-	var at = {
-		clear: Ue,
-		focus: it,
+	var ot = {
+		clear: it,
+		focus: at,
 		get values() {
 			return n();
 		},
@@ -7172,8 +7235,8 @@ function SplitInput(e, t) {
 		set oncomplete(e) {
 			h(e), flushSync();
 		}
-	}, ot = root_3$41();
-	return each(ot, 21, () => get(C), index, (e, t, n) => {
+	}, ct = root_3$41();
+	return each(ct, 21, () => get(C), index, (e, t, n) => {
 		var i = root_2$46(), a = first_child(i), s = (e) => {
 			var t = root$72(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, c())), append(e, t);
@@ -7183,7 +7246,7 @@ function SplitInput(e, t) {
 		});
 		var l = sibling(a, 2), u = child(l);
 		{
-			let e = /* @__PURE__ */ user_derived(() => R(n)), i = /* @__PURE__ */ user_derived(() => get(t).dataType ?? "text"), a = /* @__PURE__ */ user_derived(() => re(get(t))), s = /* @__PURE__ */ user_derived(() => get(t).validationPattern ?? null), c = /* @__PURE__ */ user_derived(() => get(t).validators ?? []), l = /* @__PURE__ */ user_derived(() => get(t).autoComplete ?? "on");
+			let e = /* @__PURE__ */ user_derived(() => R(n)), i = /* @__PURE__ */ user_derived(() => get(t).dataType ?? "text"), a = /* @__PURE__ */ user_derived(() => be(get(t))), s = /* @__PURE__ */ user_derived(() => get(t).validationPattern ?? null), c = /* @__PURE__ */ user_derived(() => get(t).validators ?? []), l = /* @__PURE__ */ user_derived(() => get(t).autoComplete ?? "on");
 			bind_this(Input(u, {
 				get value() {
 					return get(e);
@@ -7223,9 +7286,9 @@ function SplitInput(e, t) {
 				},
 				actionInput: !0,
 				classes: "field-group-input",
-				onInput: (e) => be(n, e),
-				onKeyDown: (e) => Me(e, n),
-				onPaste: (e) => Re(e, n)
+				onInput: (e) => Me(n, e),
+				onKeyDown: (e) => Re(e, n),
+				onPaste: (e) => Ue(e, n)
 			}), (e, t) => get(k)[t] = e, (e) => get(k)?.[e], () => [n]);
 		}
 		var f = sibling(u, 2), p = (e) => {
@@ -7235,9 +7298,9 @@ function SplitInput(e, t) {
 		if_block(f, (e) => {
 			typeof get(t).label == "string" && e(p);
 		}), reset(l), append(e, i);
-	}), reset(ot), template_effect(() => {
-		set_class(ot, 1, `field-group ${u() ?? "" ?? ""}`, "svelte-1gcz5cs"), set_attribute(ot, "data-pw", l()), set_attribute(ot, "testid", l());
-	}), append(e, ot), pop(at);
+	}), reset(ct), template_effect(() => {
+		set_class(ct, 1, `field-group ${u() ?? "" ?? ""}`, "svelte-1gcz5cs"), set_attribute(ct, "data-pw", l()), set_attribute(ct, "testid", l());
+	}), append(e, ct), pop(ot);
 }
 create_custom_element(SplitInput, {
 	values: {},
@@ -12713,6 +12776,11 @@ customElements.define("sui-choicebox", create_custom_element(Choicebox_wc, {
 		reflect: !0,
 		type: "Boolean"
 	},
+	showIndicator: {
+		attribute: "show-indicator",
+		reflect: !0,
+		type: "Boolean"
+	},
 	testId: {
 		attribute: "test-id",
 		type: "String"

package/package.json

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