demarches-normaliennes/app/components/editable_champ/iban_component/iban_component.html.haml

= @form.text_field :value,
  id: @champ.input_id,
  placeholder: t(".placeholder"),
  required: @champ.required?,
  aria: { describedby: @champ.describedby_id },
  data: { controller: 'format', format: 'iban' },
  class: "width-66-desktop",
  maxlength: 34 + 9 # count space separator of 4 digits-groups
component all the champ 2022-08-12 10:45:04 +02:00			`= @form.text_field :value,`
			`id: @champ.input_id,`
style(champ): add placeholders for email, iban, phone, siret champs Closes #7428 2022-07-04 18:37:30 +02:00			`placeholder: t(".placeholder"),`
refactor(champ): add required? used for the `required` html attribute. It check visibility to avoid hidden required input which prevent the form from being sent. 2022-10-17 10:05:59 +02:00			`required: @champ.required?,`
component all the champ 2022-08-12 10:45:04 +02:00			`aria: { describedby: @champ.describedby_id },`
refactor(js): make generic format controller 2023-01-12 18:34:45 +01:00			`data: { controller: 'format', format: 'iban' },`
style(champs): reduce width of small inputs Closes #7427 Cf #7387 Quelques considérations : - l'attribut `size` ne correspond pas exactement au nombre de caractères qui peut être saisi (à moins d'utiliser une font monospace). On doit donc utiliser une valeur légèrement supérieure pour être sûr que les combinaisons navigateurs/police/taille soient suffisantes. - on essaye d'harmoniser un peu les largeurs possibles, donc on utilise un size=20 qui correspond bien à plusieurs champs concernés - délicat d'harmoniser avec max-width car les champs de type number & date ajoutent des outils/icones à droite de l'input J'en ai profité pour définir de vrais placeholders pour les champs de type number. 2022-07-11 11:42:59 +02:00			`class: "width-66-desktop",`
			`maxlength: 34 + 9 # count space separator of 4 digits-groups`