Implement code paste support

angular-code-input/src/lib/code-input.component.html

@@ -2,6 +2,7 @@
  [class.empty]="isInputElementEmptyAt(i)"
  [class.code-hidden]="isCodeHidden">
  <input #input
+ (paste)="onPaste($event, i)"
  (input)="onInput($event, i)"
  (keydown)="onKeydown($event, i)"
  [type]="inputType"/>

angular-code-input/src/lib/code-input.component.ts

@@ -3,10 +3,12 @@ import {
  Component,
  ElementRef,
  EventEmitter,
- Input, OnChanges,
+ Input,
+ OnChanges,
  OnInit,
  Output,
- QueryList, SimpleChanges,
+ QueryList,
+ SimpleChanges,
  ViewChildren
 } from '@angular/core';
 
@@ -99,6 +101,43 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
  this.inputs[next].focus();
  }
 
+ onPaste(e: ClipboardEvent, i: number): void {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const data = e.clipboardData?.getData('text');
+
+ if (this.isEmpty(data)) {
+ return;
+ }
+
+ // Convert paste text into iterable
+ const values = data.split('');
+ let index = 0;
+
+ for (const val of values) {
+ const target = this.inputs[i + index];
+
+ // Cancel the loop when a value cannot be used
+ if (!this.canInputValue(val)) {
+ this.setInputValue(target, null);
+ this.setStateForInput(target, InputState.reset);
+ return;
+ }
+
+ this.setInputValue(target, val.toString());
+
+ // Emit changes when we have reached the last input or we are at the last cycle of our values array
+ if (i + index + 1 > this.codeLength - 1 || index >= values.length - 1) {
+ target.blur();
+ this.emitChanges();
+ return;
+ }
+
+ index += 1;
+ }
+ }
+
  async onKeydown(e: any, i: number): Promise<void> {
  const target = e.target;
  const isTargetEmpty = this.isEmpty(target.value);