feat: composant saisie assistée, composant téléphone et composant mail (#47)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #47
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/input/InputText.vue

@@ -39,13 +39,7 @@
         :width="iconSize"
         :height="iconSize"
         data-test="icon"
-        :class="[
-        hasError
-          ? 'text-m-danger'
-          : hasSuccess
-            ? 'text-m-success' : iconColor,
-        iconPositionClass,
-      ]"
+        :class="[iconStateClass, iconPositionClass]"
       />
 
     </div>
@@ -146,7 +140,7 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
     isFilled.value ? 'border-black' : 'border-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
     hasError.value
@@ -202,7 +196,7 @@ const iconInputPaddingClass = computed(() => {
 const disabled = computed(() => props.disabled)
 
 const labelPositionClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'left-8'
+  if (props.iconName && props.iconPosition === 'left') return 'left-11'
   return 'left-3'
 })
 
@@ -215,6 +209,15 @@ const iconPositionClass = computed(() => {
   const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
   return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
+
+const iconStateClass = computed(() => {
+  if (hasError.value) return 'text-m-danger'
+  if (hasSuccess.value) return 'text-m-success'
+  if (disabled.value) return props.iconColor
+  if (isFocused.value) return 'text-m-primary'
+  if (isFilled.value) return 'text-black'
+  return props.iconColor
+})
 </script>
 
 <style scoped>