@trilogy-ds/react 0.0.1-beta.41 → 0.0.1-beta.45

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

@@ -1,12 +1,14 @@
-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 { Alignable } from '../../objects/facets/Alignable';
+import { TrilogyColor, getColorStyle } from '../../objects/facets/Color';
+import { ComponentName } from '../enumsComponentsName';
+import { Icon, IconName, IconSize } from '../icon';
+import { Text } from '../text';
+import { InputAutoCapitalize, InputKeyboardAppearance, InputKeyboardType, InputStatus, InputTextContentType, InputType, } from './InputEnum';
+import AutoComplete from './autocomplete/AutoComplete.native';
+import InputGauge from './gauge/InputGauge.native';
 /**
  * Input Native Component
  * @param name {string} Input name
@@ -40,16 +42,57 @@ import { ComponentName } from "../enumsComponentsName";
 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 [isFocused, setIsFocused] = useState(false);
-    const [dynamicPlaceholder, setDynamicPlaceholder] = useState(false);
+    const inputTestId = testId ? testId : placeholder ? placeholder : 'NotSpecified';
+    const inputAccessibilityLabel = accessibilityLabel ? accessibilityLabel : placeholder ? placeholder : 'NotSpecified';
     const animationDuration = 200;
     const placeholderDefaultSize = 20;
+    const inputIcon = new Map();
+    const inputColor = getColorStyle(TrilogyColor.MAIN);
+    inputIcon.set(InputStatus.SUCCESS, IconName.CHECK_CIRCLE);
+    inputIcon.set(InputStatus.WARNING, IconName.EXCLAMATION_CIRCLE);
+    inputIcon.set(InputStatus.ERROR, IconName.EXCLAMATION_CIRCLE);
+    const [value, setValue] = useState(defaultValue || '');
+    const [email, setEmail] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+    const [iconPassword, setIconPassword] = useState(IconName.EYE);
+    const [dynamicPlaceholder, setDynamicPlaceholder] = useState(false);
+    const [isKeyboardVisible, setKeyboardVisible] = useState(null);
     const animation = useRef(new Animated.Value(25)).current;
     const sizeAnimation = useRef(new Animated.Value(placeholderDefaultSize)).current;
+    const paddingTopByPlatform = (os, dynamicPlaceholder) => {
+        if (dynamicPlaceholder && !search && os === 'ios') {
+            return isFocused ? 9 : 10;
+        }
+        if (dynamicPlaceholder && !search && os === 'android') {
+            return isFocused ? 14 : 15;
+        }
+        return 0;
+    };
+    const handleChange = useCallback((text) => {
+        var _a;
+        setValue(text);
+        setEmail('');
+        const domain = (_a = text.split('@')) === null || _a === void 0 ? void 0 : _a[1];
+        if (domain) {
+            const domains = ['gmail.com', 'bbox.fr'];
+            domains.forEach((item) => {
+                const domainSplit = domain.split('');
+                const itemSplit = item.split('').slice(0, domainSplit.length);
+                if (JSON.stringify(domainSplit) == JSON.stringify(itemSplit))
+                    setEmail(item.slice(domain.length));
+            });
+        }
+    }, []);
+    const handleClick = () => {
+        setValue(value + email);
+        setEmail('');
+    };
+    const handleSubmit = (e) => {
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
+        type === InputType.EMAIL && handleClick();
+    };
     useEffect(() => {
-        setValue(defaultValue || "");
+        setValue(defaultValue || '');
     }, [defaultValue, placeholder]);
     useEffect(() => {
         if (value && value.length > 0 && placeholder && placeholder.length > 0) {
@@ -85,58 +128,9 @@ required, ...others }) => {
             }).start();
         }
     }, [dynamicPlaceholder, animation, sizeAnimation]);
-    const inputIcon = new Map();
-    inputIcon.set(InputStatus.SUCCESS, IconName.CHECK_CIRCLE);
-    inputIcon.set(InputStatus.WARNING, IconName.EXCLAMATION_CIRCLE);
-    inputIcon.set(InputStatus.ERROR, IconName.EXCLAMATION_CIRCLE);
-    const inputColor = getColorStyle(TrilogyColor.MAIN);
-    const [iconPassword, setIconPassword] = useState(IconName.EYE);
-    const paddingTopByPlatform = (os, dynamicPlaceholder) => {
-        if (dynamicPlaceholder && !search && os === "ios") {
-            return isFocused ? 9 : 10;
-        }
-        if (dynamicPlaceholder && !search && os === "android") {
-            return isFocused ? 14 : 15;
-        }
-        return 0;
-    };
-    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];
-        if (domain) {
-            const domains = ["gmail.com", "bbox.fr"];
-            domains.forEach((item) => {
-                const domainSplit = domain.split("");
-                const itemSplit = item.split("").slice(0, domainSplit.length);
-                if (JSON.stringify(domainSplit) == JSON.stringify(itemSplit))
-                    setEmail(item.slice(domain.length));
-            });
-        }
-    }, []);
-    const handleClick = () => {
-        setValue(value + email);
-        setEmail("");
-    };
-    const handleSubmit = (e) => {
-        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
-        type === InputType.EMAIL && handleClick();
-    };
-    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();
@@ -145,306 +139,145 @@ required, ...others }) => {
     useEffect(() => {
         handleClick();
     }, [isKeyboardVisible]);
-    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);
-    const [isNumberVerify, setIsNumberVerify] = React.useState(initStateVerifies);
-    const [isUppercaseVerify, setIsUppercaseVerify] = React.useState(initStateVerifies);
-    const [isLowerercaseVerify, setisLowerercaseVerify] = React.useState(initStateVerifies);
-    const [nbAllVerifies, setNbAllVerifies] = React.useState(0);
-    const [verifies, setVerifies] = React.useState({});
-    const lengthVerify = {
-        test: (e) => {
-            var _a, _b, _c, _d;
-            if (((_a = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _a === void 0 ? void 0 : _a.max) && !validationRules.length.min) {
-                return e.length > 0 && e.length <= validationRules.length.max;
-            }
-            if (((_b = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _b === void 0 ? void 0 : _b.min) && !((_c = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _c === void 0 ? void 0 : _c.max)) {
-                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 false;
-        },
-        setVerify: setIsLengthVerify,
-    };
-    const specialCharsverify = {
-        // eslint-disable-next-line
-        test: (e) => /[^\w\*]/.test(e),
-        setVerify: setIsSpecialCharsVerify,
-    };
-    const numberVerify = {
-        // eslint-disable-next-line
-        test: (e) => /[0-9]/.test(e),
-        setVerify: setIsNumberVerify,
-    };
-    const uppercaseVerify = {
-        // eslint-disable-next-line
-        test: (e) => /[A-Z]/.test(e),
-        setVerify: setIsUppercaseVerify,
-    };
-    const lowercaseVerify = {
-        // eslint-disable-next-line
-        test: (e) => /[a-z]/.test(e),
-        setVerify: setisLowerercaseVerify,
-    };
-    React.useEffect(() => {
-        const data = {};
-        validationRules &&
-            Object.keys(validationRules).map((key) => {
-                if (key === "number")
-                    Object.assign(data, { numberVerify });
-                if (key === "length")
-                    Object.assign(data, { lengthVerify });
-                if (key === "lowercase")
-                    Object.assign(data, { lowercaseVerify });
-                if (key === "uppercase")
-                    Object.assign(data, { uppercaseVerify });
-                if (key === "specialChars")
-                    Object.assign(data, { specialCharsverify });
-            });
-        setVerifies(data);
-        setNbAllVerifies(Object.keys(data).length);
-    }, [validationRules]);
-    const handleVerifyPwd = (e) => {
-        const verifiesTests = [];
-        Object.keys(verifies).map((key) => {
-            const test = verifies[key].test(e);
-            verifiesTests.push(test);
-            if (test) {
-                verifies[key].setVerify({ isVerify: true, color: IconColor.SUCCESS });
-            }
-            else {
-                verifies[key].setVerify(initStateVerifies);
-            }
-        });
-        setPoints(verifiesTests.filter((item) => item).length);
-    };
-    const widthGauge = React.useMemo(() => {
-        const calc = Number(((points / nbAllVerifies) * 100).toFixed(0));
-        if (calc <= 50 && calc > 0)
-            return "50%";
-        if (calc <= 99 && calc > 50)
-            return "75%";
-        if (calc === 100)
-            return "100%";
-        return "0%";
-    }, [points, nbAllVerifies]);
-    const errorColor = getColorStyle(TrilogyColor.ERROR);
-    const warningColor = getColorStyle(TrilogyColor.WARNING);
-    const successColor = getColorStyle(TrilogyColor.SUCCESS);
-    const colorGauge = React.useMemo(() => {
-        const calc = Number(((points / nbAllVerifies) * 100).toFixed(0));
-        if (calc <= 50 && calc > 0)
-            return errorColor;
-        if (calc <= 99 && calc > 50)
-            return warningColor;
-        if (calc === 100)
-            return successColor;
-        return getColorStyle(TrilogyColor.FONT, 1);
-    }, [points, nbAllVerifies]);
     const styles = StyleSheet.create({
         input: {
-            paddingLeft: (customIconLeft || search) && 40
-                || (customIconLeft && isFocused
-                    || search && isFocused) && 39 || !customIconLeft && !search && isFocused && 9
-                || 10,
-            paddingRight: (customIcon || customIconRight || search) && 32 || 0,
+            paddingLeft: ((customIconLeft || search) && 40) ||
+                (((customIconLeft && isFocused) || (search && isFocused)) && 39) ||
+                (!customIconLeft && !search && isFocused && 9) ||
+                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: disabled ? getColorStyle(TrilogyColor.DISABLED) : inputColor,
         },
         dynamicPlaceholder: {
-            position: "absolute",
+            position: 'absolute',
             left: customIconLeft ? 40 : 10,
             color: getColorStyle(TrilogyColor.NEUTRAL),
         },
         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: disabled
-                ? getColorStyle(TrilogyColor.DISABLED, 1)
-                : getColorStyle(TrilogyColor.BACKGROUND),
+            position: 'relative',
+            justifyContent: 'center',
+            alignSelf: 'stretch',
+            backgroundColor: disabled ? getColorStyle(TrilogyColor.DISABLED, 1) : getColorStyle(TrilogyColor.BACKGROUND),
             borderWidth: isFocused ? 2 : 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) ||
+            borderColor: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
+                (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
+                (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
+                (status && status === 'default' && inputColor) ||
                 (isFocused && getColorStyle(TrilogyColor.MAIN)) ||
                 getColorStyle(TrilogyColor.FONT, 1),
             height: 46,
-            width: "100%",
+            width: '100%',
         },
         inputContainer: {
             height: 46,
             width: 46,
-            position: "absolute",
+            position: 'absolute',
             right: 0,
-            justifyContent: "center",
+            justifyContent: 'center',
         },
         inputContainerLeft: {
             height: 46,
             width: 46,
-            position: "absolute",
+            position: 'absolute',
             left: 0,
-            justifyContent: "center",
+            justifyContent: 'center',
         },
         inputContainerRight: {
             height: 46,
             width: 46,
-            position: "absolute",
+            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,
         },
         text: {
             zIndex: -1,
-            position: "absolute",
+            position: 'absolute',
             fontSize: 14,
             color: getColorStyle(TrilogyColor.BACKGROUND),
-            bottom: Platform.OS === "ios" ? 9 : 5,
-            left: customIconLeft
-                ? Platform.OS === "ios"
-                    ? 38
-                    : 37.5
-                : Platform.OS === "ios"
-                    ? 8
-                    : 7.5,
+            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.NEUTRAL),
             fontSize: 13,
-            height: "100%",
+            height: '100%',
             marginTop: 3,
-            marginBottom: Platform.OS === "ios" ? 0 : -3,
-        },
-        gauge: {
-            backgroundColor: colorGauge,
-            height: 4,
-            width: widthGauge,
-            borderRadius: 4,
-        },
-        verifies: {
-            flexDirection: "row",
-            justifyContent: "space-between",
-        },
-        containerGauge: {
-            backgroundColor: getColorStyle(TrilogyColor.FONT, 1),
-            height: 4,
-            width: "100%",
-            borderRadius: 4,
-            marginVertical: 8,
-        },
-        verify: {
-            flexDirection: "row",
-            alignItems: "center",
-            marginBottom: 4,
-        },
-        textVerify: {
-            marginLeft: 8,
+            marginBottom: Platform.OS === 'ios' ? 0 : -3,
         },
     });
-    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 && !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) => {
+            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,
                         });
                     }
-                    if (securityGauge) {
-                        handleVerifyPwd(text);
-                    }
                 }, onFocus: (e) => {
                     setIsFocused(true);
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                 }, onBlur: (e) => {
                     setIsFocused(false);
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                }, placeholder: placeholder, placeholderTextColor: disabled
-                    ? getColorStyle(TrilogyColor.DISABLED)
-                    : getColorStyle(TrilogyColor.MAIN), style: styles.input, ...others }),
-            type === "email" && (React.createElement(Text, { style: styles.text },
+                }, placeholder: placeholder, placeholderTextColor: disabled ? getColorStyle(TrilogyColor.DISABLED) : getColorStyle(TrilogyColor.MAIN), style: styles.input, ...others }),
+            type === 'email' && (React.createElement(Text, { style: styles.text },
                 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 &&
                 !search &&
-                ((status && status !== InputStatus.DEFAULT) ||
-                    customIcon ||
-                    customIconRight) &&
+                ((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(React.Fragment, null,
@@ -452,7 +285,7 @@ required, ...others }) => {
                     React.createElement(Icon, { name: customIconLeft }))),
                 React.createElement(TouchableOpacity, { style: styles.inputContainerRight, onPress: () => {
                         onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick({
-                            inputName: (name && name) || "",
+                            inputName: (name && name) || '',
                             inputValue: value,
                         });
                         if (iconPassword === IconName.EYE) {
@@ -462,16 +295,10 @@ required, ...others }) => {
                             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) ||
+                    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,
@@ -479,59 +306,24 @@ required, ...others }) => {
                     React.createElement(Icon, { align: Alignable.ALIGNED_CENTER, name: IconName.SEARCH, size: IconSize.SMALL, color: disabled ? getColorStyle(TrilogyColor.DISABLED) : 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: "",
+                            inputName: (name && name) || '',
+                            inputValue: '',
                             inputSelectionStart: null,
                         });
                         onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick({
-                            inputName: (name && name) || "",
-                            inputValue: "",
+                            inputName: (name && name) || '',
+                            inputValue: '',
                         });
-                        setValue("");
+                        setValue('');
                     } },
                     React.createElement(Icon, { align: Alignable.ALIGNED_CENTER, name: IconName.TIMES_CIRCLE, size: IconSize.SMALL, color: disabled ? getColorStyle(TrilogyColor.DISABLED) : 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 },
-                React.createElement(View, { style: styles.gauge })),
-            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(Text, { style: styles.textVerify },
-                            validationRules.length.min &&
-                                validationRules.length.max &&
-                                `Entre ${validationRules.length.min} et ${validationRules.length.max} caractères`,
-                            validationRules.length.min &&
-                                !validationRules.length.max &&
-                                `Minimum ${validationRules.length.min} caractères`,
-                            validationRules.length.max &&
-                                !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(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(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(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(Text, { style: styles.textVerify }, "Minuscule")))))))));
+        type === InputType.PASSWORD && securityGauge && (React.createElement(InputGauge, { validationRules: validationRules, inputValue: value }))));
 };
 Input.displayName = ComponentName.Input;
+Input.AutoComplete = (props) => {
+    const newProps = { ...props, Input };
+    return React.createElement(AutoComplete, { ...newProps });
+};
 export default Input;
 //# sourceMappingURL=Input.native.js.map