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

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