# Code Entering

Level: molecule.

## Purpose and use

Compose a verification-code input with validation feedback and a resend action.
Use Input Code alone when the flow does not need timer/resend messaging.

## Anatomy, behavior, and accessibility

- Input Code supplies digit entry and completion; an error line and either timer
  text or «Запросить код ещё раз» appear below it.
- `validating` passes the noneditable validating state to Input Code. `error`
  displays `errorText` and the input error treatment. `resetKey` resets the child.
- `codeChange` and `complete` forward strings; `resend` requests another code.
  `canResend` selects timer versus button. No countdown, request or validation
  service runs inside this component.
- `focusFirstInput()` delegates focus to the first code field. The child has the
  fixed accessible name «Код из СМС». Use the error text to explain the retry and
  keep timer text synchronized from the parent.

## Open Questions

The wrapper error line is not a live region and is not connected to the child
with `aria-describedby`. Resend visibility is independent of `validating`;
blocking resend during validation is a parent-flow decision.

## Local component contract

This is the active owned contract for `component.code-entering`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblCodeEnteringComponent` — `wbl-code-entering` (src/app/design-system/patterns/code-entering/code-entering.component.ts).

### Inputs

- `WblCodeEnteringComponent.state = input<WblCodeEnteringState>('default')`
- `WblCodeEnteringComponent.errorText = input('Неверный код. Попробуйте ещё раз')`
- `WblCodeEnteringComponent.timerText = input('Запросить код ещё раз можно через 0:59')`
- `WblCodeEnteringComponent.canResend = input(false)`
- `WblCodeEnteringComponent.codeLength = input(6)`
- `WblCodeEnteringComponent.resetKey = input<unknown>(null)`

### Public types and allowed values

```ts
type WblCodeEnteringState = 'default' | 'validating' | 'error';
```

### Models

- None.

### Outputs

- `WblCodeEnteringComponent.codeChange = output<string>()`
- `WblCodeEnteringComponent.complete = output<string>()`
- `WblCodeEnteringComponent.resend = output<void>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Code: `src/app/design-system/patterns/code-entering/code-entering.component.ts`.
- Focused test: `src/app/design-system/patterns/code-entering/code-entering.component.spec.ts`.
- Public export: `export * from './patterns/code-entering/code-entering.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/code-entering.stories.ts` (`Design System/Patterns/wbl-code-entering`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.