@reliability-design/web 1.0.2 → 1.0.6

package/dist/components/rel-otp/rel-otp.ts

@@ -0,0 +1,504 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+export type OtpType = "numeric" | "alphanumeric";
+
+@customElement("rel-otp")
+export class RelOtp extends LitElement {
+  @property({ type: String, reflect: true }) value = "";
+  @property({ type: Number }) length = 6;
+  @property({ type: Number, attribute: "group-size" }) groupSize = 3;
+  @property({ type: String }) placeholder = "";
+  @property({ type: String }) type: OtpType = "numeric";
+  @property({ type: Boolean }) mask = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) readonly = false;
+  @property({ type: Boolean }) required = false;
+  @property({ type: String }) name: string | null = null;
+  @property({ type: String }) autocomplete = "one-time-code";
+  @property({ type: String }) inputmode: "numeric" | "text" | null = null;
+  @property({ type: String }) pattern: string | null = null;
+  @property({ type: String, attribute: "aria-label" }) ariaLabel: string | null = null;
+  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, attribute: "show-separator" }) showSeparator = true;
+  @property({ type: String }) size: "sm" | "md" | "lg" = "md";
+
+  @state() private cells: string[] = [];
+  @state() private focusedIndex: number = -1;
+
+  @query(".hidden-input") private hiddenInput?: HTMLInputElement;
+
+  private isUpdatingFromValue = false;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .otp-root {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs, 8px);
+      position: relative;
+    }
+
+    .otp-group {
+      display: flex;
+      gap: var(--rel-spacing-space-2xs, 8px);
+    }
+
+    .otp-separator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--rel-colors-gray-divider);
+      font-size: var(--rel-fontSizes-lg);
+      font-weight: var(--rel-fontWeights-semibold);
+      user-select: none;
+      padding: 0 var(--rel-spacing-space-3xs, 4px);
+    }
+
+    .otp-separator.hidden {
+      display: none;
+    }
+
+    .otp-cell {
+      width: 40px;
+      height: 48px;
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      background: var(--rel-colors-white);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-lg);
+      font-weight: var(--rel-fontWeights-medium);
+      text-align: center;
+      color: var(--rel-text-primary);
+      outline: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+      caret-color: var(--rel-colors-gray-primary);
+    }
+
+    /* Size variants */
+    :host([size="sm"]) .otp-cell {
+      width: 36px;
+      height: 40px;
+      font-size: var(--rel-fontSizes-md);
+    }
+
+    :host([size="lg"]) .otp-cell {
+      width: 48px;
+      height: 56px;
+      font-size: var(--rel-fontSizes-xl);
+    }
+
+    .otp-cell::placeholder {
+      color: var(--rel-colors-gray-placeholder);
+      opacity: 0.6;
+    }
+
+    .otp-cell:hover:not(:disabled):not(:read-only) {
+      border-color: var(--rel-colors-gray-primary);
+    }
+
+    .otp-cell:focus-visible {
+      border-color: var(--rel-colors-gray-heading);
+      box-shadow: 0 0 0 2px var(--rel-border-default);
+    }
+
+    .otp-cell:disabled {
+      background: var(--rel-colors-gray-light);
+      color: var(--rel-colors-gray-disabled-text);
+      cursor: not-allowed;
+    }
+
+    .otp-cell:read-only {
+      background: var(--rel-colors-gray-surface);
+      cursor: default;
+    }
+
+    /* Invalid state */
+    :host([invalid]) .otp-cell {
+      border-color: var(--rel-border-error);
+    }
+
+    :host([invalid]) .otp-cell:focus {
+      border-color: var(--rel-border-error);
+      box-shadow: 0 0 0 2px var(--rel-background-error-light);
+    }
+
+    .hidden-input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+      width: 1px;
+      height: 1px;
+    }
+
+    /* Reduce motion */
+    @media (prefers-reduced-motion: reduce) {
+      .otp-cell {
+        transition: none;
+      }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeCells();
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+
+    // Only sync from external value changes, not internal updates
+    if (changedProperties.has("value") && !this.isUpdatingFromValue) {
+      this.syncCellsFromValue();
+    }
+
+    if (changedProperties.has("length")) {
+      this.initializeCells();
+    }
+  }
+
+  private initializeCells() {
+    this.cells = new Array(this.length).fill("");
+    this.syncCellsFromValue();
+  }
+
+  private syncCellsFromValue() {
+    const chars = this.value.split("").slice(0, this.length);
+    this.cells = new Array(this.length).fill("").map((_, i) => chars[i] || "");
+  }
+
+  private updateValue() {
+    this.isUpdatingFromValue = true;
+    const newValue = this.cells.join("");
+    this.value = newValue;
+
+    // Update hidden input for forms
+    if (this.hiddenInput) {
+      this.hiddenInput.value = newValue;
+    }
+
+    this.requestUpdate();
+
+    // Use setTimeout to ensure isUpdatingFromValue is reset after update cycle
+    setTimeout(() => {
+      this.isUpdatingFromValue = false;
+    }, 0);
+
+    const complete = newValue.length === this.length && this.isValidValue(newValue);
+
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { value: newValue, complete },
+        bubbles: true,
+        composed: true,
+      })
+    );
+
+    if (complete) {
+      this.dispatchEvent(
+        new CustomEvent("rel-complete", {
+          detail: { value: newValue },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  private isValidChar(char: string): boolean {
+    if (this.type === "numeric") {
+      return /^\d$/.test(char);
+    } else {
+      return /^[0-9a-zA-Z]$/.test(char);
+    }
+  }
+
+  private isValidValue(value: string): boolean {
+    if (this.type === "numeric") {
+      return /^\d+$/.test(value);
+    } else {
+      return /^[0-9a-zA-Z]+$/.test(value);
+    }
+  }
+
+  private getNextEditableIndex(): number {
+    // Find first empty cell, or return last index if all filled
+    const emptyIndex = this.cells.findIndex((c) => !c);
+    return emptyIndex >= 0 ? emptyIndex : this.length - 1;
+  }
+
+  private handlePointerDown(e: PointerEvent) {
+    if (this.disabled || this.readonly) return;
+
+    const input = e.currentTarget as HTMLInputElement;
+    const targetIndex = parseInt(input.dataset.index || "0", 10);
+    const nextEditableIndex = this.getNextEditableIndex();
+
+    // Prevent jumping ahead to empty cells
+    if (targetIndex > nextEditableIndex) {
+      e.preventDefault();
+      this.focusCell(nextEditableIndex);
+    }
+  }
+
+  private handleInput(e: Event) {
+    if (this.disabled || this.readonly) return;
+
+    const input = e.currentTarget as HTMLInputElement;
+    const index = parseInt(input.dataset.index || "0", 10);
+    let inputValue = input.value;
+
+    // Handle autofill/paste on any cell (mobile OTP can inject full code)
+    if (inputValue.length > 1) {
+      this.handlePasteValue(inputValue, index);
+      return;
+    }
+
+    // Get only the last character typed (handles replace-on-type)
+    const char = inputValue.slice(-1);
+
+    if (char && !this.isValidChar(char)) {
+      // Invalid character, revert
+      input.value = this.cells[index] || "";
+      return;
+    }
+
+    // Update cell (replace existing value)
+    this.cells[index] = char;
+    input.value = char;
+
+    this.updateValue();
+
+    // Auto-advance to next cell
+    if (char && index < this.length - 1) {
+      this.focusCell(index + 1);
+    }
+  }
+
+  private handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled || this.readonly) return;
+
+    const input = e.currentTarget as HTMLInputElement;
+    const index = parseInt(input.dataset.index || "0", 10);
+
+    switch (e.key) {
+      case "Backspace":
+        e.preventDefault();
+        if (this.cells[index]) {
+          // Clear current cell, keep focus
+          this.cells[index] = "";
+          input.value = "";
+          this.updateValue();
+        } else if (index > 0) {
+          // Move to previous cell and clear it
+          this.cells[index - 1] = "";
+          this.updateValue();
+          this.focusCell(index - 1);
+        }
+        break;
+
+      case "Delete":
+        e.preventDefault();
+        this.cells[index] = "";
+        input.value = "";
+        this.updateValue();
+        break;
+
+      case "ArrowLeft":
+        e.preventDefault();
+        if (index > 0) {
+          this.focusCell(index - 1);
+        }
+        break;
+
+      case "ArrowRight":
+        e.preventDefault();
+        if (index < this.length - 1) {
+          this.focusCell(index + 1);
+        }
+        break;
+
+      case "Home":
+        e.preventDefault();
+        this.focusCell(0);
+        break;
+
+      case "End":
+        e.preventDefault();
+        this.focusCell(this.length - 1);
+        break;
+
+      case "ArrowUp":
+      case "ArrowDown":
+        e.preventDefault();
+        break;
+    }
+  }
+
+  private handlePaste(e: ClipboardEvent) {
+    if (this.disabled || this.readonly) return;
+
+    e.preventDefault();
+
+    const input = e.currentTarget as HTMLInputElement;
+    const index = parseInt(input.dataset.index || "0", 10);
+    const pastedText = e.clipboardData?.getData("text") || "";
+
+    this.handlePasteValue(pastedText, index);
+  }
+
+  private handlePasteValue(text: string, startIndex: number) {
+    // Filter valid characters
+    const validChars = text.split("").filter((char) => this.isValidChar(char));
+
+    // Distribute characters starting from startIndex
+    let updateIndex = startIndex;
+    validChars.forEach((char) => {
+      if (updateIndex < this.length) {
+        this.cells[updateIndex] = char;
+        updateIndex++;
+      }
+    });
+
+    this.updateValue();
+
+    // Focus next empty cell or last cell
+    const nextEmptyIndex = this.cells.findIndex((c, i) => i >= startIndex && !c);
+    if (nextEmptyIndex >= 0) {
+      this.focusCell(nextEmptyIndex);
+    } else {
+      this.focusCell(Math.min(updateIndex, this.length - 1));
+    }
+  }
+
+  private handleFocus(e: FocusEvent) {
+    const input = e.currentTarget as HTMLInputElement;
+    const index = parseInt(input.dataset.index || "0", 10);
+
+    this.focusedIndex = index;
+
+    // Select all text on focus for easy replacement
+    input.select();
+  }
+
+  private handleBlur() {
+    this.focusedIndex = -1;
+  }
+
+  private focusCell(index: number) {
+    if (index < 0 || index >= this.length) return;
+
+    const input = this.renderRoot.querySelector(
+      `input[data-index="${index}"]`
+    ) as HTMLInputElement | null;
+
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }
+
+  private getInputMode(): string {
+    if (this.inputmode) return this.inputmode;
+    return this.type === "numeric" ? "numeric" : "text";
+  }
+
+  private getAriaLabel(index: number): string {
+    const total = this.length;
+    const position = index + 1;
+    const label = this.type === "numeric" ? "Digit" : "Character";
+    return `${label} ${position} of ${total}`;
+  }
+
+  private getGroups(): number[][] {
+    const groups: number[][] = [];
+    if (this.groupSize <= 0 || !this.showSeparator) {
+      // Single group with all cells
+      groups.push(Array.from({ length: this.length }, (_, i) => i));
+    } else {
+      // Multiple groups
+      for (let i = 0; i < this.length; i += this.groupSize) {
+        groups.push(
+          Array.from(
+            { length: Math.min(this.groupSize, this.length - i) },
+            (_, j) => i + j
+          )
+        );
+      }
+    }
+    return groups;
+  }
+
+  render() {
+    const groups = this.getGroups();
+
+    return html`
+      <div
+        part="root"
+        class="otp-root"
+        role="group"
+        aria-label="${this.ariaLabel || "One-time password input"}">
+        ${groups.map(
+          (group, groupIndex) => html`
+            <div class="otp-group">
+              ${group.map(
+                (index) => html`
+                  <input
+                    part="cell"
+                    class="otp-cell"
+                    data-index="${index}"
+                    type="${this.mask ? "password" : "text"}"
+                    inputmode="${this.getInputMode()}"
+                    autocomplete="${index === 0 ? this.autocomplete : "off"}"
+                    pattern="${this.pattern || ""}"
+                    placeholder="${this.placeholder}"
+                    maxlength="1"
+                    .value="${this.cells[index] || ""}"
+                    ?disabled="${this.disabled}"
+                    ?readonly="${this.readonly}"
+                    ?required="${this.required && index === 0}"
+                    aria-label="${this.getAriaLabel(index)}"
+                    @pointerdown="${this.handlePointerDown}"
+                    @input="${this.handleInput}"
+                    @keydown="${this.handleKeyDown}"
+                    @paste="${this.handlePaste}"
+                    @focus="${this.handleFocus}"
+                    @blur="${this.handleBlur}"
+                  />
+                `
+              )}
+            </div>
+            ${groupIndex < groups.length - 1
+              ? html`<div part="separator" class="otp-separator">-</div>`
+              : ""}
+          `
+        )}
+
+        ${this.name
+          ? html`<input
+              part="hidden-input"
+              class="hidden-input"
+              type="hidden"
+              name="${this.name}"
+              .value="${this.value}"
+            />`
+          : ""}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-otp": RelOtp;
+  }
+}