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.
validatingpasses the noneditable validating state to Input Code.errordisplayserrorTextand the input error treatment.resetKeyresets the child.codeChangeandcompleteforward strings;resendrequests another code.canResendselects 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
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';insrc/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.