@kouji-ui/core 0.0.4 → 0.1.1

package/src/input-mask/input-mask.tokens.ts

@@ -0,0 +1,49 @@
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Default token alphabet for `KjInputMask`.
+ *
+ * | Token | Matches |
+ * |-------|---------|
+ * | `9`   | digit `[0-9]` |
+ * | `a`   | letter `[A-Za-z]` |
+ * | `*`   | alphanumeric `[A-Za-z0-9]` |
+ *
+ * Override app-wide by providing `KJ_INPUT_MASK_TOKENS` in `bootstrapApplication`:
+ * ```ts
+ * provideKjInputMaskTokens({ ...defaultTokens, 'H': /[0-9A-Fa-f]/ })
+ * ```
+ */
+export const KJ_INPUT_MASK_TOKENS = new InjectionToken<Record<string, RegExp>>(
+  'KjInputMaskTokens',
+  {
+    providedIn: 'root',
+    factory: () => ({
+      '9': /[0-9]/,
+      'a': /[A-Za-z]/,
+      '*': /[A-Za-z0-9]/,
+    }),
+  },
+);
+
+/** Default token map — exported for consumers who want to spread into custom maps. */
+export const defaultMaskTokens: Record<string, RegExp> = {
+  '9': /[0-9]/,
+  'a': /[A-Za-z]/,
+  '*': /[A-Za-z0-9]/,
+};
+
+/**
+ * Helper to provide a custom token alphabet app-wide.
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideKjInputMaskTokens({ ...defaultMaskTokens, 'H': /[0-9A-Fa-f]/ }),
+ *   ],
+ * });
+ * ```
+ */
+export function provideKjInputMaskTokens(tokens: Record<string, RegExp>) {
+  return { provide: KJ_INPUT_MASK_TOKENS, useValue: tokens };
+}

package/src/input-mask/input-mask.ts

@@ -0,0 +1,280 @@
+import {
+  AbstractControl,
+  NG_VALIDATORS,
+  ValidationErrors,
+  Validator,
+} from '@angular/forms';
+import {
+  Directive,
+  ElementRef,
+  booleanAttribute,
+  computed,
+  effect,
+  forwardRef,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+
+import { KjInput } from '../input/input';
+import { compileMask } from './input-mask.compile';
+import { MaskEngine } from './input-mask.engine';
+import { KJ_INPUT_MASK_TOKENS } from './input-mask.tokens';
+
+/**
+ * Applies a fixed-format mask to a native `<input>` element. Composes
+ * `KjInput` via `hostDirectives` so all Angular forms integration (CVA,
+ * `aria-invalid`, focus-ring, ARIA-disabled) applies unchanged.
+ *
+ * Supports `[(ngModel)]`, `[formControl]`, and `[formControlName]` bindings.
+ * By default the model value is the **raw** (unmasked) alphanumerics
+ * (`kjMaskMode="unmasked"`). Switch to `kjMaskMode="masked"` to commit the
+ * full display string.
+ *
+ * Provides itself as an `NG_VALIDATORS` multi-validator. When the field has
+ * been partially filled, `validate()` returns `{ mask: { expected, filled,
+ * required } }`. An empty field does **not** trigger the mask error —
+ * `Validators.required` handles that.
+ *
+ * @example
+ * ```html
+ * <input kjInputMask kjMask="(999) 999-9999" [(ngModel)]="phone" />
+ * ```
+ *
+ * @doc-category Core/Inputs
+ * @doc
+ * @doc-name input-mask
+ * @doc-description Applies a fixed-format mask to a native input with caret handling and partial-fill validation.
+ * @doc-is-main
+ */
+@Directive({
+  selector: 'input[kjInputMask]',
+  standalone: true,
+  exportAs: 'kjInputMask',
+  hostDirectives: [
+    // KjInput already composes KjDisabled internally — do NOT add KjDisabled
+    // here or it will match twice on the same element (NG0309).
+    // kjDisabled is forwarded via our own input below and bound via the
+    // KjDisabled instance injected from the host directive chain.
+    { directive: KjInput, inputs: ['kjInvalid'] },
+  ],
+  providers: [
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => KjInputMask),
+      multi: true,
+    },
+  ],
+  host: {
+    // Force type="text" — partially-masked values fail browser validation
+    // for tel/email/number types, and autofill behaves better with text.
+    '[attr.type]': '"text"',
+    '[attr.inputmode]': 'autoInputMode()',
+    '[attr.placeholder]': 'displayPlaceholder()',
+    '(keydown)': 'engine.onKeydown($event)',
+    '(paste)': 'engine.onPaste($event)',
+    '(beforeinput)': 'engine.onBeforeInput($event)',
+    '(compositionstart)': 'engine.onCompositionStart()',
+    '(compositionend)': 'engine.onCompositionEnd($event)',
+  },
+})
+export class KjInputMask implements Validator {
+  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);
+  private readonly kjInput = inject(KjInput);
+  private readonly defaultTokens = inject(KJ_INPUT_MASK_TOKENS);
+
+  // ── Inputs ────────────────────────────────────────────────────────────
+
+  /** Mask template, e.g. `'(999) 999-9999'`, `'99/99/9999'`. Required. */
+  readonly kjMask = input.required<string>();
+
+  /**
+   * Per-instance token overrides. Merged on top of `KJ_INPUT_MASK_TOKENS`
+   * — entries here win. Use `provideKjInputMaskTokens` to set app-wide tokens.
+   */
+  readonly kjMaskTokens = input<Record<string, RegExp>>({});
+
+  /**
+   * What value is committed to the FormControl.
+   * - `'unmasked'` (default) — raw alphanumerics only: `"4155551234"`.
+   * - `'masked'` — full display string: `"(415) 555-1234"`.
+   */
+  readonly kjMaskMode = input<'unmasked' | 'masked'>('unmasked');
+
+  /** Placeholder character shown in unfilled variable slots. @default '_' */
+  readonly kjSlotChar = input<string>('_');
+
+  /**
+   * Forwarded to the inherited `KjDisabled` directive. Setting this disables
+   * the input via `aria-disabled` / `data-disabled`.
+   * @default false
+   */
+  readonly kjDisabled = input(false, { transform: booleanAttribute });
+
+  /**
+   * When `true`, the field value is cleared on blur if the mask is incomplete.
+   * Defaults to `false` — see analysis doc for rationale.
+   */
+  readonly kjAutoClear = input(false, { transform: booleanAttribute });
+
+  /**
+   * Override the auto-generated screen-reader format hint. Set to `''` to
+   * suppress it entirely (when `KjField`'s hint slot already covers the format).
+   */
+  readonly kjFormatHint = input<string | undefined>(undefined);
+
+  // ── Outputs ──────────────────────────────────────────────────────────
+
+  /**
+   * Emits once when every variable slot is filled.
+   * Re-emits if the user clears and re-fills.
+   * Useful for auto-advancing focus in card-entry UX.
+   */
+  readonly kjComplete = output<void>();
+
+  // ── Computed state ───────────────────────────────────────────────────
+
+  /** Compiled mask — recomputed when `kjMask` or `kjMaskTokens` change. */
+  readonly compiled = computed(() =>
+    compileMask(this.kjMask(), {
+      ...this.defaultTokens,
+      ...this.kjMaskTokens(),
+    }),
+  );
+
+  /**
+   * `inputmode` attribute — `'numeric'` when all variable slots are digit-only,
+   * `'text'` otherwise. Mobile browsers show the right keyboard.
+   */
+  readonly autoInputMode = computed<string>(() => {
+    const { slots, variableIndices } = this.compiled();
+    if (variableIndices.length === 0) return 'text';
+    const allDigit = variableIndices.every(i => {
+      const slot = slots[i];
+      return slot.kind === 'variable' && slot.tokenId === '9';
+    });
+    return allDigit ? 'numeric' : 'text';
+  });
+
+  /**
+   * Placeholder string shown when no value is entered — literals keep their
+   * characters, variable slots show `kjSlotChar`.
+   */
+  readonly displayPlaceholder = computed<string>(() => {
+    const { slots } = this.compiled();
+    const slotChar = this.kjSlotChar();
+    return slots
+      .map(slot => (slot.kind === 'literal' ? slot.char : slotChar))
+      .join('');
+  });
+
+  /** The MaskEngine instance — stateful per-directive. */
+  readonly engine: MaskEngine;
+
+  // Track whether completion was already emitted for the current fill cycle.
+  private _wasComplete = false;
+
+  constructor() {
+    const el = this.el;
+    const formCtrl = this.kjInput.formCtrl;
+
+    this.engine = new MaskEngine({
+      getCompiled: () => this.compiled(),
+      getSlotChar: () => this.kjSlotChar(),
+      getMaskMode: () => this.kjMaskMode(),
+      callbacks: {
+        getValue: () => el.nativeElement.value,
+        setValue: (val) => { el.nativeElement.value = val; },
+        getCaret: () => el.nativeElement.selectionStart ?? 0,
+        setCaret: (pos) => {
+          // requestAnimationFrame defers the caret move so it runs after the
+          // browser's own value-update microtask; without this, some browsers
+          // reset selectionStart back to 0 after we set the value.
+          requestAnimationFrame(() => {
+            el.nativeElement.setSelectionRange(pos, pos);
+          });
+        },
+        notifyChange: (val) => {
+          formCtrl.notifyChange(val);
+          // Check completion
+          const { variableIndices } = this.compiled();
+          const display = el.nativeElement.value;
+          const slotChar = this.kjSlotChar();
+          const filled = variableIndices.filter(i => {
+            const ch = display[i];
+            return ch && ch !== slotChar;
+          }).length;
+          const isComplete = filled === variableIndices.length;
+          if (isComplete && !this._wasComplete) {
+            this._wasComplete = true;
+            this.kjComplete.emit();
+          } else if (!isComplete) {
+            this._wasComplete = false;
+          }
+        },
+      },
+    });
+
+    // Reflect the form control value → display string (e.g. from setValue() calls).
+    effect(() => {
+      const val = formCtrl.value();
+      if (val == null || val === undefined) return;
+      const raw = String(val);
+      this.engine.applyRawValue(raw);
+    });
+
+    // Auto-clear on blur if incomplete and kjAutoClear is enabled.
+    el.nativeElement.addEventListener('blur', () => {
+      if (!this.kjAutoClear()) return;
+      const errors = this._computeErrors();
+      if (errors) {
+        el.nativeElement.value = this.displayPlaceholder();
+        formCtrl.notifyChange('');
+        this._wasComplete = false;
+      }
+    });
+  }
+
+  // ── Validator ────────────────────────────────────────────────────────
+
+  /** @internal — called by Angular forms. */
+  validate(_control: AbstractControl): ValidationErrors | null {
+    return this._computeErrors();
+  }
+
+  private _computeErrors(): ValidationErrors | null {
+    const { variableIndices } = this.compiled();
+    const display = this.el.nativeElement.value;
+    const slotChar = this.kjSlotChar();
+    const mode = this.kjMaskMode();
+
+    // Determine how many variable slots are filled in the current display.
+    const filledCount = variableIndices.filter(i => {
+      const ch = display[i];
+      return ch && ch !== slotChar;
+    }).length;
+
+    // Empty (no filled slots) — let Validators.required handle it.
+    if (filledCount === 0) return null;
+
+    // If using unmasked mode, the control value is the raw string. Recalculate
+    // filled from the control value length vs. variableCount.
+    let effectiveFilled = filledCount;
+    if (mode === 'unmasked') {
+      const raw = String(this.kjInput.formCtrl.value() ?? '');
+      effectiveFilled = Math.min(raw.length, variableIndices.length);
+    }
+
+    if (effectiveFilled < variableIndices.length) {
+      return {
+        mask: {
+          expected: this.kjMask(),
+          filled: effectiveFilled,
+          required: variableIndices.length,
+        },
+      };
+    }
+
+    return null;
+  }
+}

package/src/input-otp/index.ts

@@ -0,0 +1,2 @@
+export { KjInputOtp, KjInputOtpCell } from './input-otp';
+export { KJ_INPUT_OTP, type KjInputOtpContext } from './input-otp.context';

package/src/input-otp/input-otp.context.ts

@@ -0,0 +1,41 @@
+import { InjectionToken, Signal } from '@angular/core';
+
+/**
+ * Context shared between the root `KjInputOtp` directive and each
+ * `KjInputOtpCell` leaf directive.  Provided via `KJ_INPUT_OTP` on the
+ * root element and injected by every cell.
+ */
+export interface KjInputOtpContext {
+  /** The full concatenated OTP value. */
+  value: Signal<string>;
+  /** Total number of cells. */
+  length: Signal<number>;
+  /** Whether the widget is disabled (union of kjDisabled + form-level disable). */
+  disabled: Signal<boolean>;
+  /** Whether the widget is read-only. */
+  readonly: Signal<boolean>;
+  /** Whether cells should render as `type="password"`. */
+  masked: Signal<boolean>;
+  /** Character set restriction — drives inputmode, pattern, and filter logic. */
+  charSet: Signal<'digits' | 'alphanumeric' | RegExp>;
+  /** Index of the currently focused cell, or -1 if none. */
+  focusedIndex: Signal<number>;
+
+  /** Called by a cell to push its new single character (or '' for clear) upstream. */
+  setCellValue(index: number, char: string): void;
+  /** Called by a cell to request focus movement by delta (+1 / -1). */
+  moveFocus(delta: number): void;
+  /** Called by a cell to request focus on a specific index (clamped). */
+  focusIndex(index: number): void;
+  /** Called by a cell when a paste event occurs; distributes chars from `fromIndex`. */
+  handlePaste(event: ClipboardEvent, fromIndex: number): void;
+  /** Called by a cell when a copy event occurs; writes the full code to clipboard. */
+  handleCopy(event: ClipboardEvent): void;
+  /** Called by a cell in ngOnInit to register its native input element. */
+  registerCell(index: number, el: HTMLInputElement): void;
+  /** Called by a cell in ngOnDestroy to deregister its element. */
+  unregisterCell(index: number): void;
+}
+
+/** Injection token for the `KjInputOtpContext`. */
+export const KJ_INPUT_OTP = new InjectionToken<KjInputOtpContext>('KjInputOtp');

package/src/input-otp/input-otp.spec.ts

@@ -0,0 +1,308 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { render, fireEvent } from '@testing-library/angular';
+import { FormsModule } from '@angular/forms';
+import { KjInputOtp, KjInputOtpCell } from './input-otp';
+
+// ── Test host component ───────────────────────────────────────────────────────
+
+@Component({
+  selector: 'kj-test-host',
+  standalone: true,
+  imports: [KjInputOtp, KjInputOtpCell, FormsModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div
+      kjInputOtp
+      [kjLength]="length()"
+      [kjCharSet]="charSet()"
+      [kjMask]="masked()"
+      [(ngModel)]="value"
+    >
+      @for (i of cells(); track i) {
+        <input kjInputOtpCell [kjIndex]="i" />
+      }
+    </div>
+  `,
+})
+class TestHost {
+  value = '';
+  readonly length = signal(6);
+  readonly charSet = signal<'digits' | 'alphanumeric'>('digits');
+  readonly masked = signal(false);
+  readonly cells = signal([0, 1, 2, 3, 4, 5]);
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+async function setup() {
+  const result = await render(TestHost, {});
+  return result;
+}
+
+function getInputs(container: HTMLElement): HTMLInputElement[] {
+  return Array.from(container.querySelectorAll('input[kjInputOtpCell]'));
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('KjInputOtp + KjInputOtpCell', () => {
+  describe('rendering', () => {
+    it('renders 6 cells by default', async () => {
+      const { container } = await setup();
+      expect(getInputs(container)).toHaveLength(6);
+    });
+
+    it('sets role="group" on the root', async () => {
+      const { container } = await setup();
+      expect(container.querySelector('[role="group"]')).toBeInTheDocument();
+    });
+
+    it('sets autocomplete="one-time-code" on cell 0 only', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      expect(inputs[0].getAttribute('autocomplete')).toBe('one-time-code');
+      expect(inputs[1].getAttribute('autocomplete')).toBe('off');
+    });
+
+    it('sets inputmode="numeric" for digits charSet', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      expect(inputs[0].getAttribute('inputmode')).toBe('numeric');
+    });
+
+    it('sets correct aria-label per cell', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      expect(inputs[0].getAttribute('aria-label')).toBe('Code digit 1 of 6');
+      expect(inputs[5].getAttribute('aria-label')).toBe('Code digit 6 of 6');
+    });
+
+    it('sets maxlength="1" on each cell', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      inputs.forEach((input) => expect(input.getAttribute('maxlength')).toBe('1'));
+    });
+
+    it('sets spellcheck="false" on each cell', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      inputs.forEach((input) => expect(input.getAttribute('spellcheck')).toBe('false'));
+    });
+  });
+
+  describe('auto-advance', () => {
+    it('sets cell value and advances when a valid character is entered', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+      inputs[0].focus();
+
+      // Simulate typing '1' into cell 0.
+      // We set the target value before firing (testing-library normalises this).
+      Object.defineProperty(inputs[0], 'value', { value: '1', writable: true, configurable: true });
+      fireEvent.input(inputs[0], { target: { value: '1' } });
+      await fixture.whenStable();
+
+      // The context should have the char set to '1' in cell 0.
+      expect(inputs[0].value).toBe('1');
+    });
+
+    it('ignores non-digit characters when charSet is digits', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+      inputs[0].focus();
+
+      fireEvent.input(inputs[0], { target: { value: 'a' } });
+      await fixture.whenStable();
+
+      // Cell should remain empty since 'a' is rejected.
+      expect(inputs[0].value).toBe('');
+    });
+  });
+
+  describe('backspace', () => {
+    it('clears a cell and moves focus back on backspace when cell is filled', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+
+      // First fill cell 0 via multi-char input event (iOS autofill path).
+      fireEvent.input(inputs[0], { target: { value: '12' } });
+      await fixture.whenStable();
+
+      // Focus cell 1 and press backspace.
+      inputs[1].focus();
+      fireEvent.keyDown(inputs[1], { key: 'Backspace' });
+      await fixture.whenStable();
+
+      // Cell 1 should now be empty.
+      expect(inputs[1].value).toBe('');
+    });
+
+    it('moves to previous cell on backspace when current cell is empty', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+
+      // Cell 1 is empty; focus it.
+      inputs[1].focus();
+      fireEvent.keyDown(inputs[1], { key: 'Backspace' });
+      await fixture.whenStable();
+
+      // No error thrown; cell 0 is still in the DOM.
+      expect(inputs[0]).toBeInTheDocument();
+    });
+  });
+
+  describe('arrow keys', () => {
+    it('ArrowLeft and ArrowRight are handled without errors', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+      inputs[2].focus();
+
+      fireEvent.keyDown(inputs[2], { key: 'ArrowLeft' });
+      await fixture.whenStable();
+      expect(inputs[1]).toBeInTheDocument();
+
+      fireEvent.keyDown(inputs[1], { key: 'ArrowRight' });
+      await fixture.whenStable();
+      expect(inputs[2]).toBeInTheDocument();
+    });
+
+    it('Home focuses cell 0', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+      inputs[3].focus();
+
+      fireEvent.keyDown(inputs[3], { key: 'Home' });
+      await fixture.whenStable();
+
+      expect(inputs[0]).toBeInTheDocument();
+    });
+
+    it('End focuses last cell', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+      inputs[0].focus();
+
+      fireEvent.keyDown(inputs[0], { key: 'End' });
+      await fixture.whenStable();
+
+      expect(inputs[5]).toBeInTheDocument();
+    });
+  });
+
+  describe('paste distribution (via iOS autofill path)', () => {
+    it('distributes multi-char input across cells from index 0', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+
+      // Simulate iOS autofill: cell 0 receives the full OTP as its input value.
+      fireEvent.input(inputs[0], { target: { value: '123456' } });
+      await fixture.whenStable();
+
+      expect(inputs[0].value).toBe('1');
+      expect(inputs[1].value).toBe('2');
+      expect(inputs[2].value).toBe('3');
+      expect(inputs[3].value).toBe('4');
+      expect(inputs[4].value).toBe('5');
+      expect(inputs[5].value).toBe('6');
+    });
+
+    it('filters non-digit characters when distributing', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+
+      // '1a2b3c' → only '1', '2', '3' pass the digits filter.
+      fireEvent.input(inputs[0], { target: { value: '1a2b3c' } });
+      await fixture.whenStable();
+
+      expect(inputs[0].value).toBe('1');
+      expect(inputs[1].value).toBe('2');
+      expect(inputs[2].value).toBe('3');
+      // Remaining cells stay empty.
+      expect(inputs[3].value).toBe('');
+    });
+
+    it('distributes from a mid-cell index', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+
+      // First fill cells 0+1 via multi-char from cell 0.
+      fireEvent.input(inputs[0], { target: { value: '12' } });
+      await fixture.whenStable();
+
+      // Then paste '345' from cell 2.
+      fireEvent.input(inputs[2], { target: { value: '345' } });
+      await fixture.whenStable();
+
+      expect(inputs[2].value).toBe('3');
+      expect(inputs[3].value).toBe('4');
+      expect(inputs[4].value).toBe('5');
+    });
+  });
+
+  describe('completion', () => {
+    it('fills all cells when a 6-char value is distributed from cell 0', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+
+      fireEvent.input(inputs[0], { target: { value: '123456' } });
+      await fixture.whenStable();
+
+      // All 6 cells should have their respective digits.
+      expect(inputs[0].value).toBe('1');
+      expect(inputs[5].value).toBe('6');
+    });
+  });
+
+  describe('mask mode', () => {
+    it('sets type="password" when kjMask is true', async () => {
+      const { container, fixture } = await render(TestHost, {});
+      const comp = fixture.componentInstance as TestHost;
+      comp.masked.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const inputs = getInputs(container);
+      inputs.forEach((input) => expect(input.type).toBe('password'));
+    });
+
+    it('uses type="text" by default', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      inputs.forEach((input) => expect(input.type).toBe('text'));
+    });
+  });
+
+  describe('tab stop', () => {
+    it('first cell has tabindex="0" when all cells are empty', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      expect(inputs[0].getAttribute('tabindex')).toBe('0');
+      expect(inputs[1].getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('all non-first cells have tabindex="-1"', async () => {
+      const { container } = await setup();
+      const inputs = getInputs(container);
+      for (let i = 1; i < inputs.length; i++) {
+        expect(inputs[i].getAttribute('tabindex')).toBe('-1');
+      }
+    });
+  });
+
+  describe('delete key', () => {
+    it('clears a filled cell without moving focus', async () => {
+      const { container, fixture } = await setup();
+      const inputs = getInputs(container);
+
+      // Fill cell 0.
+      fireEvent.input(inputs[0], { target: { value: '5' } });
+      await fixture.whenStable();
+
+      inputs[0].focus();
+      fireEvent.keyDown(inputs[0], { key: 'Delete' });
+      await fixture.whenStable();
+
+      expect(inputs[0].value).toBe('');
+    });
+  });
+});