lucca-front icon indicating copy to clipboard operation
lucca-front copied to clipboard

[Phone number] New Angular component

Open jeremie-lucca opened this issue 1 year ago • 1 comments

image

  • Phone number component should be named lu-phone-number-input and use luInput
  • 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-input will 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

jeremie-lucca avatar Jun 21 '24 09:06 jeremie-lucca

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)

Supamiu avatar Jul 02 '24 13:07 Supamiu