@trilogy-ds/react 0.0.1-beta-3 → 0.0.1-beta.10

package/lib/components/input/Input.native.js

@@ -1,12 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Animated, Keyboard, Platform, StyleSheet, TextInput, TouchableOpacity, View, } from 'react-native';
-import { AlertState, getAlertStyle } from '../../objects/facets/Alert';
-import { InputAutoCapitalize, InputKeyboardAppearance, InputKeyboardType, InputStatus, InputTextContentType, InputType, } from './InputEnum';
-import { Icon, IconColor, IconName, IconSize } from '../icon';
-import { Text } from '../text';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { Alignable } from '../../objects/facets/Alignable';
-import { ComponentName } from '../enumsComponentsName';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Animated, Keyboard, Platform, StyleSheet, TextInput, TouchableOpacity, View, } from "react-native";
+import { AlertState, getAlertStyle } from "../../objects/facets/Alert";
+import { InputAutoCapitalize, InputKeyboardAppearance, InputKeyboardType, InputStatus, InputTextContentType, InputType, } from "./InputEnum";
+import { Icon, IconColor, IconName, IconSize } from "../icon";
+import { Text } from "../text";
+import { getColorStyle, TrilogyColor } from "../../objects/facets/Color";
+import { Alignable } from "../../objects/facets/Alignable";
+import { ComponentName } from "../enumsComponentsName";
 /**
  * Input Native Component
  * @param name {string} Input name
@@ -34,17 +34,21 @@ import { ComponentName } from '../enumsComponentsName';
  * @param maxLength {number} Textarea max length
  * @param accessibilityLabel {string} Accessibility label
  * @param testId {string} Test Id for Test Integration
+ * @param required {boolean} Required input
+ * @param accessibilityActivate {boolean}
  */
-const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status, help, placeholder, type, hasIcon, customIcon, search, reference, keyboardStyle, autoCapitalize, autoCorrect, autoCompleteType, textContentType, keyboardType, keyType, onSubmit, maxLength, testId, accessibilityLabel, customIconRight, customIconLeft, securityGauge, validationRules, onIconClick, ...others }) => {
-    const [value, setValue] = useState(defaultValue || '');
-    const [email, setEmail] = useState('');
+const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status, help, placeholder, type, hasIcon, customIcon, search, reference, keyboardStyle, autoCapitalize, autoCorrect, autoCompleteType, textContentType, keyboardType, keyType, onSubmit, maxLength, testId, accessibilityLabel, customIconRight, customIconLeft, securityGauge, validationRules, onIconClick, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+required, ...others }) => {
+    const [value, setValue] = useState(defaultValue || "");
+    const [email, setEmail] = useState("");
     const [dynamicPlaceholder, setDynamicPlaceholder] = useState(false);
     const animationDuration = 200;
     const placeholderDefaultSize = 20;
     const animation = useRef(new Animated.Value(25)).current;
     const sizeAnimation = useRef(new Animated.Value(placeholderDefaultSize)).current;
     useEffect(() => {
-        setValue(defaultValue || '');
+        setValue(defaultValue || "");
     }, [defaultValue, placeholder]);
     useEffect(() => {
         if (value && value.length > 0 && placeholder && placeholder.length > 0) {
@@ -55,7 +59,7 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
         }
     }, [placeholder, value]);
     useEffect(() => {
-        if (dynamicPlaceholder) {
+        if (dynamicPlaceholder && !search) {
             Animated.timing(animation, {
                 toValue: 3,
                 duration: animationDuration,
@@ -84,30 +88,37 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
     inputIcon.set(InputStatus.SUCCESS, IconName.CHECK_CIRCLE);
     inputIcon.set(InputStatus.WARNING, IconName.EXCLAMATION_CIRCLE);
     inputIcon.set(InputStatus.ERROR, IconName.EXCLAMATION_CIRCLE);
-    const placeholderColor = getColorStyle(TrilogyColor.GREY);
-    const inputColor = getColorStyle(TrilogyColor.TERTIARY);
+    const inputColor = getColorStyle(TrilogyColor.MAIN);
     const [iconPassword, setIconPassword] = useState(IconName.EYE);
     const paddingTopByPlatform = (os, dynamicPlaceholder) => {
-        if (dynamicPlaceholder && os === 'ios') {
+        if (dynamicPlaceholder && !search && os === "ios") {
             return 10;
         }
-        if (dynamicPlaceholder && os === 'android') {
+        if (dynamicPlaceholder && !search && os === "android") {
             return 15;
         }
         return 0;
     };
-    const inputTestId = testId ? testId : placeholder ? placeholder : 'NotSpecified';
-    const inputAccessibilityLabel = accessibilityLabel ? accessibilityLabel : placeholder ? placeholder : 'NotSpecified';
+    const inputTestId = testId
+        ? testId
+        : placeholder
+            ? placeholder
+            : "NotSpecified";
+    const inputAccessibilityLabel = accessibilityLabel
+        ? accessibilityLabel
+        : placeholder
+            ? placeholder
+            : "NotSpecified";
     const handleChange = useCallback((text) => {
         var _a;
         setValue(text);
-        setEmail('');
-        const domain = (_a = text.split('@')) === null || _a === void 0 ? void 0 : _a[1];
+        setEmail("");
+        const domain = (_a = text.split("@")) === null || _a === void 0 ? void 0 : _a[1];
         if (domain) {
-            const domains = ['gmail.com', 'bbox.fr'];
+            const domains = ["gmail.com", "bbox.fr"];
             domains.forEach((item) => {
-                const domainSplit = domain.split('');
-                const itemSplit = item.split('').slice(0, domainSplit.length);
+                const domainSplit = domain.split("");
+                const itemSplit = item.split("").slice(0, domainSplit.length);
                 if (JSON.stringify(domainSplit) == JSON.stringify(itemSplit))
                     setEmail(item.slice(domain.length));
             });
@@ -115,7 +126,7 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
     }, []);
     const handleClick = () => {
         setValue(value + email);
-        setEmail('');
+        setEmail("");
     };
     const handleSubmit = (e) => {
         onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
@@ -123,8 +134,8 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
     };
     const [isKeyboardVisible, setKeyboardVisible] = useState(null);
     useEffect(() => {
-        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
-        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
+        const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => setKeyboardVisible(true));
+        const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => setKeyboardVisible(false));
         return () => {
             keyboardDidHideListener.remove();
             keyboardDidShowListener.remove();
@@ -133,7 +144,7 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
     useEffect(() => {
         handleClick();
     }, [isKeyboardVisible]);
-    const initStateVerifies = { isVerify: false, color: IconColor.GREY };
+    const initStateVerifies = { isVerify: false, color: IconColor.NEUTRAL };
     const [points, setPoints] = React.useState(0);
     const [isLengthVerify, setIsLengthVerify] = React.useState(initStateVerifies);
     const [isSpecialCharsVerify, setIsSpecialCharsVerify] = React.useState(initStateVerifies);
@@ -152,7 +163,8 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
                 return e.length >= validationRules.length.min;
             }
             if (((_d = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _d === void 0 ? void 0 : _d.max) && validationRules.length.min) {
-                return e.length >= validationRules.length.min && e.length <= validationRules.length.max;
+                return (e.length >= validationRules.length.min &&
+                    e.length <= validationRules.length.max);
             }
             return false;
         },
@@ -182,15 +194,15 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
         const data = {};
         validationRules &&
             Object.keys(validationRules).map((key) => {
-                if (key === 'number')
+                if (key === "number")
                     Object.assign(data, { numberVerify });
-                if (key === 'length')
+                if (key === "length")
                     Object.assign(data, { lengthVerify });
-                if (key === 'lowercase')
+                if (key === "lowercase")
                     Object.assign(data, { lowercaseVerify });
-                if (key === 'uppercase')
+                if (key === "uppercase")
                     Object.assign(data, { uppercaseVerify });
-                if (key === 'specialChars')
+                if (key === "specialChars")
                     Object.assign(data, { specialCharsverify });
             });
         setVerifies(data);
@@ -213,12 +225,12 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
     const widthGauge = React.useMemo(() => {
         const calc = Number(((points / nbAllVerifies) * 100).toFixed(0));
         if (calc <= 50 && calc > 0)
-            return '50%';
+            return "50%";
         if (calc <= 99 && calc > 50)
-            return '75%';
+            return "75%";
         if (calc === 100)
-            return '100%';
-        return '0%';
+            return "100%";
+        return "0%";
     }, [points, nbAllVerifies]);
     const errorColor = getColorStyle(TrilogyColor.ERROR);
     const warningColor = getColorStyle(TrilogyColor.WARNING);
@@ -231,79 +243,102 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
             return warningColor;
         if (calc === 100)
             return successColor;
-        return '#D1D1D1';
+        return getColorStyle(TrilogyColor.FONT, 1);
     }, [points, nbAllVerifies]);
     const styles = StyleSheet.create({
         input: {
-            paddingLeft: customIconLeft ? 40 : 10,
-            paddingRight: customIcon || customIconRight ? 21 : 0,
+            paddingLeft: customIconLeft || search ? 40 : 10,
+            paddingRight: customIcon || customIconRight || search ? 32 : 0,
             marginTop: paddingTopByPlatform(Platform.OS, dynamicPlaceholder),
-            width: hasIcon && (status || customIcon) ? '85%' : '95%',
+            width: hasIcon && (status || customIcon) ? "85%" : "95%",
             height: 46,
-            color: inputColor,
+            color: disabled ? getColorStyle(TrilogyColor.DISABLED) : inputColor,
         },
         dynamicPlaceholder: {
-            position: 'absolute',
+            position: "absolute",
             left: customIconLeft ? 40 : 10,
-            color: getColorStyle(TrilogyColor.GREY),
+            color: getColorStyle(TrilogyColor.MAIN),
         },
         help: {
             fontSize: 12,
-            color: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
-                (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
-                (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
-                (status && status === 'default' && inputColor) ||
+            color: (status && status === "success" && getAlertStyle(AlertState.SUCCESS)) ||
+                (status && status === "warning" && getAlertStyle(AlertState.WARNING)) ||
+                (status && status === "error" && getAlertStyle(AlertState.ERROR)) ||
+                (status && status === "default" && inputColor) ||
+                (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
                 inputColor,
             paddingLeft: 4,
             paddingTop: 2,
         },
         inputWrapper: {
-            position: 'relative',
-            justifyContent: 'center',
-            alignSelf: 'stretch',
-            backgroundColor: getColorStyle(TrilogyColor.WHITE),
+            position: "relative",
+            justifyContent: "center",
+            alignSelf: "stretch",
+            backgroundColor: disabled
+                ? getColorStyle(TrilogyColor.DISABLED, 1)
+                : getColorStyle(TrilogyColor.WHITE),
             borderWidth: 1,
             borderRadius: 3,
-            borderColor: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
-                (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
-                (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
-                (status && status === 'default' && inputColor) ||
-                inputColor,
+            borderColor: (status && status === "success" && getAlertStyle(AlertState.SUCCESS)) ||
+                (status && status === "warning" && getAlertStyle(AlertState.WARNING)) ||
+                (status && status === "error" && getAlertStyle(AlertState.ERROR)) ||
+                (status && status === "default" && inputColor) ||
+                getColorStyle(TrilogyColor.FONT, 1),
             height: 46,
-            width: '100%',
+            width: "100%",
         },
         inputContainer: {
             height: 46,
             width: 46,
-            position: 'absolute',
+            position: "absolute",
+            right: 0,
+            justifyContent: "center",
+        },
+        inputContainerLeft: {
+            height: 46,
+            width: 46,
+            position: "absolute",
+            left: 0,
+            justifyContent: "center",
+        },
+        inputContainerRight: {
+            height: 46,
+            width: 46,
+            position: "absolute",
             right: 0,
-            justifyContent: 'center',
+            justifyContent: "center",
         },
         inputIcon: {
-            position: 'absolute',
+            position: "absolute",
             right: 10,
             top: !value ? -33 : -38,
         },
         inputIconLeft: {
-            position: 'absolute',
+            position: "absolute",
             left: 10,
             top: !value ? -33 : -38,
         },
         textWhitte: {
             zIndex: -1,
-            position: 'absolute',
+            position: "absolute",
             fontSize: 14,
-            color: '#ffffff00',
-            bottom: Platform.OS === 'ios' ? 9 : 5,
-            left: customIconLeft ? (Platform.OS === 'ios' ? 38 : 37.5) : Platform.OS === 'ios' ? 8 : 7.5,
+            color: getColorStyle(TrilogyColor.WHITE),
+            bottom: Platform.OS === "ios" ? 9 : 5,
+            left: customIconLeft
+                ? Platform.OS === "ios"
+                    ? 38
+                    : 37.5
+                : Platform.OS === "ios"
+                    ? 8
+                    : 7.5,
         },
         domain: {
             zIndex: 1,
-            color: getColorStyle(TrilogyColor.GREY),
+            color: getColorStyle(TrilogyColor.NEUTRAL),
             fontSize: 13,
-            height: '100%',
+            height: "100%",
             marginTop: 3,
-            marginBottom: Platform.OS === 'ios' ? 0 : -3,
+            marginBottom: Platform.OS === "ios" ? 0 : -3,
         },
         gauge: {
             backgroundColor: colorGauge,
@@ -312,33 +347,38 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
             borderRadius: 4,
         },
         verifies: {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
+            flexDirection: "row",
+            justifyContent: "space-between",
         },
         containerGauge: {
-            backgroundColor: '#D1D1D1',
+            backgroundColor: getColorStyle(TrilogyColor.FONT, 1),
             height: 4,
-            width: '100%',
+            width: "100%",
             borderRadius: 4,
             marginVertical: 8,
         },
         verify: {
-            flexDirection: 'row',
-            alignItems: 'center',
+            flexDirection: "row",
+            alignItems: "center",
             marginBottom: 4,
         },
         textVerify: {
             marginLeft: 8,
         },
     });
-    return (React.createElement(View, { style: { width: '100%' }, accessible: !!inputAccessibilityLabel, accessibilityLabel: inputAccessibilityLabel, testID: inputTestId },
+    return (React.createElement(View, { style: { width: "100%" }, accessible: !!inputAccessibilityLabel, accessibilityLabel: inputAccessibilityLabel, testID: inputTestId },
         React.createElement(View, { testID: 'input-wrapper-id', style: styles.inputWrapper },
-            dynamicPlaceholder && (React.createElement(Animated.Text, { style: [styles.dynamicPlaceholder, { top: animation, fontSize: sizeAnimation }] }, placeholder)),
-            React.createElement(TextInput, { testID: 'input-id', clearTextOnFocus: false, secureTextEntry: !!(type && type === InputType.PASSWORD && iconPassword === IconName.EYE), value: value, editable: !disabled, ref: reference, maxLength: maxLength, autoCapitalize: autoCapitalize || InputAutoCapitalize.NONE, keyboardAppearance: keyboardStyle || InputKeyboardAppearance.DEFAULT, autoCorrect: autoCorrect || false, autoComplete: autoCompleteType, returnKeyType: keyType, textContentType: textContentType || InputTextContentType.NONE, keyboardType: keyboardType || InputKeyboardType.DEFAULT, onSubmitEditing: handleSubmit, onChangeText: (text) => {
+            dynamicPlaceholder && !search && (React.createElement(Animated.Text, { style: [
+                    styles.dynamicPlaceholder,
+                    { top: animation, fontSize: sizeAnimation },
+                ] }, placeholder)),
+            React.createElement(TextInput, { testID: 'input-id', clearTextOnFocus: false, secureTextEntry: !!(type &&
+                    type === InputType.PASSWORD &&
+                    iconPassword === IconName.EYE), value: value, editable: !disabled, ref: reference, maxLength: maxLength, autoCapitalize: autoCapitalize || InputAutoCapitalize.NONE, keyboardAppearance: keyboardStyle || InputKeyboardAppearance.DEFAULT, autoCorrect: autoCorrect || false, autoComplete: autoCompleteType, returnKeyType: keyType, textContentType: textContentType || InputTextContentType.NONE, keyboardType: keyboardType || InputKeyboardType.DEFAULT, onSubmitEditing: handleSubmit, onChangeText: (text) => {
                     handleChange(text);
                     if (onChange) {
                         onChange({
-                            inputName: (name && name) || '',
+                            inputName: (name && name) || "",
                             inputValue: text,
                             inputSelectionStart: null,
                         });
@@ -350,64 +390,99 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                 }, onBlur: (e) => {
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                }, placeholder: placeholder, placeholderTextColor: placeholderColor, style: styles.input, ...others }),
-            type === 'email' && (React.createElement(Text, { style: styles.textWhitte },
+                }, placeholder: placeholder, placeholderTextColor: disabled
+                    ? getColorStyle(TrilogyColor.DISABLED)
+                    : getColorStyle(TrilogyColor.MAIN), style: styles.input, ...others }),
+            type === "email" && (React.createElement(Text, { style: styles.textWhitte },
                 value,
                 React.createElement(Text, { style: styles.domain }, email))),
             hasIcon &&
                 ((status && status !== InputStatus.DEFAULT) || customIconLeft) &&
                 type !== InputType.PASSWORD &&
-                !customIcon && (React.createElement(Icon, { style: styles.inputIconLeft, align: Alignable.ALIGNED_START, name: (customIconLeft && customIconLeft.replace('tri-', '').replace('ui-', '')) ||
-                    inputIcon.get(status).replace('tri-', '').replace('ui-', ''), size: IconSize.SMALL, color: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
-                    (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
-                    (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
-                    (status && status === 'default' && inputColor) ||
+                !customIcon && (React.createElement(Icon, { style: styles.inputIconLeft, align: Alignable.ALIGNED_START, name: (customIconLeft &&
+                    customIconLeft.replace("tri-", "").replace("ui-", "")) ||
+                    inputIcon.get(status).replace("tri-", "").replace("ui-", ""), size: IconSize.SMALL, color: (status &&
+                    status === "success" &&
+                    getAlertStyle(AlertState.SUCCESS)) ||
+                    (status &&
+                        status === "warning" &&
+                        getAlertStyle(AlertState.WARNING)) ||
+                    (status &&
+                        status === "error" &&
+                        getAlertStyle(AlertState.ERROR)) ||
+                    (status && status === "default" && inputColor) ||
+                    (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
                     inputColor })),
             hasIcon &&
-                ((status && status !== InputStatus.DEFAULT) || customIcon || customIconRight) &&
+                !search &&
+                ((status && status !== InputStatus.DEFAULT) ||
+                    customIcon ||
+                    customIconRight) &&
                 type !== InputType.PASSWORD && (React.createElement(TouchableOpacity, { style: styles.inputContainer, activeOpacity: onIconClick ? 0.2 : 1, onPress: () => {
                     onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick({
-                        inputName: (name && name) || '',
+                        inputName: (name && name) || "",
                         inputValue: value,
                     });
                 } },
-                React.createElement(Icon, { testId: 'icon-status-id', align: Alignable.ALIGNED_CENTER, name: (customIcon && customIcon.replace('tri-', '').replace('ui-', '')) ||
-                        (customIconRight && customIconRight.replace('tri-', '').replace('ui-', '')) ||
-                        inputIcon.get(status).replace('tri-', '').replace('ui-', ''), size: IconSize.SMALL, color: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
-                        (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
-                        (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
-                        (status && status === 'default' && inputColor) ||
+                React.createElement(Icon, { testId: 'icon-status-id', align: Alignable.ALIGNED_CENTER, name: (customIcon &&
+                        customIcon.replace("tri-", "").replace("ui-", "")) ||
+                        (customIconRight &&
+                            customIconRight.replace("tri-", "").replace("ui-", "")) ||
+                        inputIcon.get(status).replace("tri-", "").replace("ui-", ""), size: IconSize.SMALL, color: (status &&
+                        status === "success" &&
+                        getAlertStyle(AlertState.SUCCESS)) ||
+                        (status &&
+                            status === "warning" &&
+                            getAlertStyle(AlertState.WARNING)) ||
+                        (status &&
+                            status === "error" &&
+                            getAlertStyle(AlertState.ERROR)) ||
+                        (status && status === "default" && inputColor) ||
+                        (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
                         inputColor }))),
-            hasIcon && type === InputType.PASSWORD && (React.createElement(TouchableOpacity, { style: styles.inputContainer, onPress: () => {
-                    onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick({
-                        inputName: (name && name) || '',
-                        inputValue: value,
-                    });
-                    if (iconPassword === IconName.EYE) {
-                        setIconPassword(IconName.EYE_SLASH);
-                    }
-                    else {
-                        setIconPassword(IconName.EYE);
-                    }
-                } },
-                React.createElement(Icon, { testId: 'password-id', align: Alignable.ALIGNED_CENTER, name: iconPassword, size: IconSize.SMALL, color: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
-                        (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
-                        (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
-                        (status && status === 'default' && inputColor) ||
-                        inputColor }))),
-            search && !status && (React.createElement(TouchableOpacity, { testID: 'search-id', style: styles.inputContainer, onPressIn: () => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange({
-                        inputName: (name && name) || '',
-                        inputValue: '',
-                        inputSelectionStart: null,
-                    });
-                    onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick({
-                        inputName: (name && name) || '',
-                        inputValue: '',
-                    });
-                    setValue('');
-                } },
-                React.createElement(Icon, { align: Alignable.ALIGNED_CENTER, name: value ? IconName.TIMES : IconName.SEARCH, size: IconSize.SMALL, color: getColorStyle(TrilogyColor.GREY) })))),
+            hasIcon && type === InputType.PASSWORD && (React.createElement(React.Fragment, null,
+                hasIcon && customIconLeft && (React.createElement(View, { style: [{ paddingLeft: 10 }, styles.inputContainerLeft] },
+                    React.createElement(Icon, { name: customIconLeft }))),
+                React.createElement(TouchableOpacity, { style: styles.inputContainerRight, onPress: () => {
+                        onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick({
+                            inputName: (name && name) || "",
+                            inputValue: value,
+                        });
+                        if (iconPassword === IconName.EYE) {
+                            setIconPassword(IconName.EYE_SLASH);
+                        }
+                        else {
+                            setIconPassword(IconName.EYE);
+                        }
+                    } },
+                    React.createElement(Icon, { testId: 'password-id', align: Alignable.ALIGNED_CENTER, name: iconPassword, size: IconSize.SMALL, color: (status &&
+                            status === "success" &&
+                            getAlertStyle(AlertState.SUCCESS)) ||
+                            (status &&
+                                status === "warning" &&
+                                getAlertStyle(AlertState.WARNING)) ||
+                            (status &&
+                                status === "error" &&
+                                getAlertStyle(AlertState.ERROR)) ||
+                            (status && status === "default" && inputColor) ||
+                            (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
+                            inputColor })))),
+            search && !status && (React.createElement(React.Fragment, null,
+                React.createElement(View, { style: styles.inputContainerLeft },
+                    React.createElement(Icon, { align: Alignable.ALIGNED_CENTER, name: IconName.SEARCH, size: IconSize.SMALL, color: getColorStyle(TrilogyColor.NEUTRAL) })),
+                value.length > 0 && (React.createElement(TouchableOpacity, { testID: 'search-id', style: styles.inputContainerRight, onPressIn: () => {
+                        onChange === null || onChange === void 0 ? void 0 : onChange({
+                            inputName: (name && name) || "",
+                            inputValue: "",
+                            inputSelectionStart: null,
+                        });
+                        onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick({
+                            inputName: (name && name) || "",
+                            inputValue: "",
+                        });
+                        setValue("");
+                    } },
+                    React.createElement(Icon, { align: Alignable.ALIGNED_CENTER, name: IconName.TIMES_CIRCLE, size: IconSize.SMALL, color: getColorStyle(TrilogyColor.NEUTRAL) })))))),
         help && (React.createElement(Text, { testId: 'help-id', style: styles.help }, help)),
         type === InputType.PASSWORD && securityGauge && (React.createElement(View, null,
             React.createElement(View, { style: styles.containerGauge },
@@ -415,7 +490,9 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
             React.createElement(View, { style: styles.verifies },
                 React.createElement(View, null,
                     validationRules && validationRules.length && (React.createElement(View, { style: styles.verify },
-                        React.createElement(Icon, { color: isLengthVerify.color, name: isLengthVerify.isVerify ? IconName.CHECK_CIRCLE : IconName.TIMES, size: IconSize.SMALLER }),
+                        React.createElement(Icon, { color: isLengthVerify.color, name: isLengthVerify.isVerify
+                                ? IconName.CHECK_CIRCLE
+                                : IconName.TIMES, size: IconSize.SMALLER }),
                         React.createElement(Text, { style: styles.textVerify },
                             validationRules.length.min &&
                                 validationRules.length.max &&
@@ -427,17 +504,25 @@ const Input = ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status
                                 !validationRules.length.min &&
                                 `Maximum ${validationRules.length.max} caractères`))),
                     validationRules && validationRules.specialChars && (React.createElement(View, { style: styles.verify },
-                        React.createElement(Icon, { color: isSpecialCharsVerify.color, name: isSpecialCharsVerify.isVerify ? IconName.CHECK_CIRCLE : IconName.TIMES, size: IconSize.SMALLER }),
+                        React.createElement(Icon, { color: isSpecialCharsVerify.color, name: isSpecialCharsVerify.isVerify
+                                ? IconName.CHECK_CIRCLE
+                                : IconName.TIMES, size: IconSize.SMALLER }),
                         React.createElement(Text, { style: styles.textVerify }, "Caract\u00E8res sp\u00E9ciaux"))),
                     validationRules && validationRules.number && (React.createElement(View, { style: styles.verify },
-                        React.createElement(Icon, { color: isNumberVerify.color, name: isNumberVerify.isVerify ? IconName.CHECK_CIRCLE : IconName.TIMES, size: IconSize.SMALLER }),
+                        React.createElement(Icon, { color: isNumberVerify.color, name: isNumberVerify.isVerify
+                                ? IconName.CHECK_CIRCLE
+                                : IconName.TIMES, size: IconSize.SMALLER }),
                         React.createElement(Text, { style: styles.textVerify }, "Chiffre")))),
                 React.createElement(View, null,
                     validationRules && validationRules.uppercase && (React.createElement(View, { style: styles.verify },
-                        React.createElement(Icon, { color: isUppercaseVerify.color, name: isUppercaseVerify.isVerify ? IconName.CHECK_CIRCLE : IconName.TIMES, size: IconSize.SMALLER }),
+                        React.createElement(Icon, { color: isUppercaseVerify.color, name: isUppercaseVerify.isVerify
+                                ? IconName.CHECK_CIRCLE
+                                : IconName.TIMES, size: IconSize.SMALLER }),
                         React.createElement(Text, { style: styles.textVerify }, "Majuscule"))),
                     validationRules && validationRules.lowercase && (React.createElement(View, { style: styles.verify },
-                        React.createElement(Icon, { color: isLowerercaseVerify.color, name: isLowerercaseVerify.isVerify ? IconName.CHECK_CIRCLE : IconName.TIMES, size: IconSize.SMALLER }),
+                        React.createElement(Icon, { color: isLowerercaseVerify.color, name: isLowerercaseVerify.isVerify
+                                ? IconName.CHECK_CIRCLE
+                                : IconName.TIMES, size: IconSize.SMALLER }),
                         React.createElement(Text, { style: styles.textVerify }, "Minuscule")))))))));
 };
 Input.displayName = ComponentName.Input;