feat: OTP/PIN input component

src/components/carousel/carousel-indicator-container.spec.ts

@@ -5,6 +5,7 @@ import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first } from '../common/util.js';
 import {
   simulateClick,
+  simulateFocusOut,
   simulateKeyboard,
   simulatePointerDown,
   simulatePointerUp,
@@ -100,7 +101,7 @@ describe('Carousel Indicator Container', () => {
       </div>`
     );
 
-    first(buttons).dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+    simulateFocusOut(first(buttons));
     await elementUpdated(container);
 
     expect(container).shadowDom.to.equal(
@@ -127,9 +128,7 @@ describe('Carousel Indicator Container', () => {
       </igc-carousel-indicator>`
     );
 
-    first(buttons).dispatchEvent(
-      new FocusEvent('focusout', { bubbles: true, relatedTarget: indicator })
-    );
+    simulateFocusOut(first(buttons), { relatedTarget: indicator });
     await elementUpdated(container);
 
     expect(container).shadowDom.to.equal(

src/components/carousel/carousel.spec.ts

@@ -21,6 +21,7 @@ import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
   finishAnimationsFor,
   simulateClick,
+  simulateFocusOut,
   simulateKeyboard,
   simulateLostPointerCapture,
   simulatePointerDown,
@@ -763,7 +764,7 @@ describe('Carousel', () => {
         await elementUpdated(carousel);
 
         // loose focus
-        carousel.dispatchEvent(new FocusEvent('focusout'));
+        simulateFocusOut(carousel);
         await elementUpdated(carousel);
 
         expect(carousel.isPlaying).to.be.false;
@@ -820,7 +821,7 @@ describe('Carousel', () => {
         expect(carousel.current).to.equal(0);
 
         // loose focus
-        carousel.dispatchEvent(new FocusEvent('focusout'));
+        simulateFocusOut(carousel);
         await elementUpdated(carousel);
 
         await clock.tickAsync(200);

src/components/common/controllers/focus-ring.spec.ts

@@ -10,6 +10,7 @@ import { css, LitElement } from 'lit';
 import { partMap } from '../part-map.js';
 import {
   simulateClick,
+  simulateFocusOut,
   simulateKeyboard,
   simulatePointerDown,
   simulatePointerUp,
@@ -79,9 +80,7 @@ describe('Focus ring controller', () => {
 
     expect(hasKeyboardFocusStyles(instance.button)).to.be.true;
 
-    instance.button.dispatchEvent(
-      new FocusEvent('focusout', { bubbles: true, composed: true })
-    );
+    simulateFocusOut(instance.button);
     await elementUpdated(instance);
 
     expect(hasKeyboardFocusStyles(instance.button)).to.be.false;

src/components/common/controllers/key-bindings.ts

@@ -16,6 +16,8 @@ export const arrowLeft = 'ArrowLeft' as const;
 export const arrowRight = 'ArrowRight' as const;
 export const arrowUp = 'ArrowUp' as const;
 export const arrowDown = 'ArrowDown' as const;
+export const backspaceKey = 'Backspace' as const;
+export const deleteKey = 'Delete' as const;
 export const enterKey = 'Enter' as const;
 export const spaceBar = ' ' as const;
 export const escapeKey = 'Escape' as const;

src/components/common/utils.spec.ts

@@ -246,6 +246,15 @@ export function simulateBlur(node: Element): void {
   node.dispatchEvent(new FocusEvent('blur'));
 }
 
+export function simulateFocusOut(
+  node: Element,
+  options?: FocusEventInit
+): void {
+  node.dispatchEvent(
+    new FocusEvent('focusout', { bubbles: true, composed: true, ...options })
+  );
+}
+
 export function simulatePointerDown(
   node: Element,
   options?: PointerEventInit,
@@ -428,6 +437,19 @@ export function simulateDoubleClick(node: Element): void {
   );
 }
 
+export function simulatePaste(node: Element, pastedText: string): void {
+  const clipboardData = new DataTransfer();
+  clipboardData.setData('text/plain', pastedText);
+
+  node.dispatchEvent(
+    new ClipboardEvent('paste', {
+      bubbles: true,
+      composed: true,
+      clipboardData,
+    })
+  );
+}
+
 /**
  * Returns an array of all Animation objects affecting this element or which are scheduled to do so in the future.
  * It can optionally return Animation objects for descendant elements too.