lucca-front
lucca-front copied to clipboard
[Phone number] New Angular component
- Phone number component should be named
lu-phone-number-inputand useluInput - It must usable in a form field (including label, tooltip, inline message, inline message state generic options), with this basic structure:
<lu-form-field>
<lu-phone-number-input></lu-phone-number-input>
</lu-form-field>
lu-phone-number-inputwill handle specific options- It should be build around 2 existing inputs (Select Simple & Textfield)
- It's possible to switch from indicator selector (Simple select) to phone number (Textfield) with tab
https://www.figma.com/design/PQEOcUF9CYfKNqaejAGLWP/Lucca-components?m=auto&node-id=18201-510&t=yfoiT0Aiqf9aKYwN-1
Crafted by Cleemy
Details added with the meeting on that topic:
- https://catamphetamine.gitlab.io/libphonenumber-js/ for formatting
- We'll have to expose the formatting lib in a service (or pipe) so it can be used in a possible display only
- Format number using libphonenumber-js on blur
- Update select's country as the user types
⚠️ We might want to decouple country flag, country name and prefix, examples:
- USA and Canada share the same prefix: +1
- France and its DOM share the same flag but not the same prefix (Martinique is +596 for instance, while France is +33)