@kouji-ui/core 0.1.1 → 0.1.2

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

@@ -1,49 +0,0 @@
-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

@@ -1,280 +0,0 @@
-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

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

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

@@ -1,41 +0,0 @@
-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

@@ -1,308 +0,0 @@
-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('');
-    });
-  });
-});