[Component] Create component - Phone number input (v1.3.1)

Description

As a user of the library
I want to be able to use the component phone number input
So that I can add configurable phone number input in my own projects

As a user of the library
I want to be able to use the component
So that I have access to the documentation on how to use it

As a user of the Design System Toolbox
I want to access the component
So that I can understand how to use it:

• while using the demo app I can interact with the available options and observe the changes on the component itself
• I can see the code associated to the component customization
• I can copy and paste the code from the app based on the selected customization
• or when looking into the code of the app itself, I would also understand how to use it

About v1.3

Verbatims of @MaximeTonnerre:

Release note:
- The input text reference changes from a regular weight (font-weight-label-default) to a medium weight (font-weight-label-moderate).
- Removal of the component’s max-width to avoid blocking certain layouts and to provide greater flexibility of use. The max-width values remain available in the design documentation.

See Figma reference

About v1.3.1

See Figma reference

Verbatims of @TonyAntonyHello :

Our Phone number input component has just been updated. Version 1.3.1 is now available.
 
Release note:
For “Loading" state
The loader frame has been renamed to Circular progress indicator
The following token has been removed: action-button-border-radius-default
Absolute positioning has been removed and replaced with Auto Layout.
The container now uses: ouds/action/button/space/inset/icon-only-default

Design guidelines

unified-design-system.orange.com

Context

The component is described in the Figma boards and available in version v1.2.0

Definition of Ready

To be defined

Definition of Done

To be defined

Technical notes

Some notes after discussions with design team:

• Use numeric / phone keyboard layout
• Placeholders / format must be displayed
• Phone numbers when written in field must be formatted according to placeholder
• No limitation on countries: all country of the world must be considered
• Users can be able to choose only some countries (e.g. use an array / list of countries, use a predefined subset of countries for MEA, Europe, French-speaking countries...)
• So, given a selected contry, placeholder and validations must be done
• Emojies for flags msut noe be used ; design team disagree because they are not "flat" and rendering depends to OS
• Country flag images can be stored in a dedicated module (in iOS side for example, beside OUDSComponents etc)
• PhoneNumberKit can be considered if there are no native alternatives
• Copy/pasted texts must be formatted when pasted
• SVG images can be used from the project flagicons.lipis.dev
• We can imagine to name icons of flags with country codes ; then any tool sending country code form phone number will also send name of icon to load
• When a digit is written in the field, the digit is not displayed in the field (for pin code) but the mask symbol instead (star, dot, etc)
• If copy/paste of text (from outside), keep only digits (e.g. "Bonjour 1234" copyed will be "1234" pasted)

Locate the existing v1.2.0 phone number input implementation in this Android library and compare it with the linked Figma references and technical notes. Before coding, resolve the undefined Definition of Ready and Done and the scope for country selection, formatting, flags, keyboard, masking, and paste handling; completion must include the component, documentation, and demo customization/code described.