# Input Phone Number

Level: molecule.

## Purpose and use

Enter a country-formatted telephone number with an optional mask preview. Use
ordinary Input for arbitrary identifiers or a field requiring a controlled value.

## Anatomy, behavior, and accessibility

- A country flag/prefix control precedes a native tel input, floating label,
  optional trailing icon/clear button and description. Country is supplied externally.
- Entry is formatted using the country's mask (or custom maskText). Nondigits are
  blocked/sanitized; output is the formatted visible string, not normalized E.164.
  The active empty control shows the dial code, protects its prefix from partial
  deletion, and clears a dial-code-only value on blur.
- Clear emits an empty string and returns focus. Escape blurs. A temporary readonly
  guard is released after focus; disabled affects both country and phone controls.
- labelText names the input even when the floating label is hidden. Warning and
  error mark it aria-invalid; shown description is linked with aria-describedby.
  Mask preview is decorative. Explain phone requirements in description text.

## Open Questions

There is no value input, ControlValueAccessor or country-change output. The
country control tracks focus/active appearance but does not render a country
picker. Required currently adds a visual asterisk, not native required semantics.

## Local component contract

This is the active owned contract for `component.input-phone-number`. 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

- `WblInputPhoneNumberComponent` — `wbl-input-phone-number` (src/app/design-system/patterns/input-phone-number/input-phone-number.component.ts).

### Inputs

- `WblInputPhoneNumberComponent.size = input<WblInputPhoneNumberSize>('L')`
- `WblInputPhoneNumberComponent.state = input<WblInputState>('default')`
- `WblInputPhoneNumberComponent.validation = input<WblInputValidation>('default')`
- `WblInputPhoneNumberComponent.showLabel = input(true)`
- `WblInputPhoneNumberComponent.labelText = input('Номер телефона')`
- `WblInputPhoneNumberComponent.required = input(false)`
- `WblInputPhoneNumberComponent.showPlaceholder = input(true)`
- `WblInputPhoneNumberComponent.placeholderText = input('Номер телефона')`
- `WblInputPhoneNumberComponent.clear = input(false)`
- `WblInputPhoneNumberComponent.rightContent = input(false)`
- `WblInputPhoneNumberComponent.rightIcon = input(false)`
- `WblInputPhoneNumberComponent.rightIconName = input<WblIconName>('spark')`
- `WblInputPhoneNumberComponent.showDescription = input(false)`
- `WblInputPhoneNumberComponent.descriptionText = input('Description')`
- `WblInputPhoneNumberComponent.country = input<WblPhoneCountryKey>('russia')`
- `WblInputPhoneNumberComponent.mask = input(false)`
- `WblInputPhoneNumberComponent.maskText = input('input')`

### Public types and allowed values

```ts
type WblInputPhoneNumberSize = 'L' | 'M';
type WblInputState = 'default' | 'active' | 'disabled';
type WblInputValidation = 'default' | 'warning' | 'error';
type WblPhoneCountryKey =
  | 'abkhazia'
  | 'algeria'
  | 'armenia'
  | 'azerbaijan'
  | 'belarus'
  | 'china'
  | 'ethiopia'
  | 'georgia'
  | 'hongKong'
  | 'israel'
  | 'kazakhstan'
  | 'kyrgyzstan'
  | 'macau'
  | 'moldova'
  | 'poland'
  | 'russia'
  | 'saudiArabia'
  | 'slovakia'
  | 'southOssetia'
  | 'syria'
  | 'tajikistan'
  | 'turkey'
  | 'turkmenistan'
  | 'uae'
  | 'ukraine'
  | 'unitedKingdom'
  | 'unknown'
  | 'usa'
  | 'uzbekistan'
  | 'vietnam';
```

Icon-name inputs use `WblIconName` from the [shared icon contract](../atoms/icon.md);
choose a key present in the owned icon pack, not an arbitrary external icon name.

### Models

- None.

### Outputs

- `WblInputPhoneNumberComponent.valueChange = output<string>()`

### Slots and projection markers

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

### Local evidence

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

## 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.