@juspay/svelte-ui-components 2.56.0 → 2.57.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/package.json

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