@trilogy-ds/react 0.0.17-esm-cjs → 0.0.19-esm-cjs

package/lib/components/input/ISecurityRulesDefaults.js

@@ -0,0 +1,23 @@
+export default {
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "patternValidator": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "RegExp"
+    ]
+  },
+  "dataAttribute": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "{ [key: string]: string | number | boolean; }"
+    ]
+  }
+};

package/lib/components/input/Input.d.mts

@@ -1,5 +1,8 @@
 import React from 'react';
-import { InputProp } from './InputProps';
+import { Accessibility } from '../../objects';
+import { InputProps, InputWebEvents } from './InputProps';
+export interface InputProp extends Accessibility, InputProps, InputWebEvents {
+}
 /**
  * Input Component
  * @param name {string} Input name
@@ -24,6 +27,7 @@ import { InputProp } from './InputProps';
  * @param securityGauge {boolean} add security gauge for input type password
  * @param validationRules {IValidationRules} Textarea max length
  * @param readOnly {boolean} Read only input
+ * @param autoCapitalize {InputAutoCapitalize} Auto capitalize input
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param loading {boolean} Loading input
  * @param value {string} Value for Input

package/lib/components/input/Input.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
-import { InputProp } from './InputProps';
+import { Accessibility } from '../../objects';
+import { InputProps, InputWebEvents } from './InputProps';
+export interface InputProp extends Accessibility, InputProps, InputWebEvents {
+}
 /**
  * Input Component
  * @param name {string} Input name
@@ -24,6 +27,7 @@ import { InputProp } from './InputProps';
  * @param securityGauge {boolean} add security gauge for input type password
  * @param validationRules {IValidationRules} Textarea max length
  * @param readOnly {boolean} Read only input
+ * @param autoCapitalize {InputAutoCapitalize} Auto capitalize input
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param loading {boolean} Loading input
  * @param value {string} Value for Input

package/lib/components/input/Input.js

@@ -190,6 +190,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -291,7 +292,7 @@ var import_react5 = __toESM(require("react"));
 
 // components/input/gauge/hook/useGauge.tsx
 var import_react4 = __toESM(require("react"));
-var useGauge = ({ validationRules, inputValue }) => {
+var useGauge = ({ validationRules, inputValue, securityRules }) => {
   var _a, _b;
   const [points, setPoints] = import_react4.default.useState(0);
   const initStateVerifies = { isVerify: false, color: "NEUTRAL" /* NEUTRAL */ };
@@ -301,21 +302,37 @@ var useGauge = ({ validationRules, inputValue }) => {
   const [isUppercaseVerify, setIsUppercaseVerify] = import_react4.default.useState(initStateVerifies);
   const [isLowerercaseVerify, setisLowerercaseVerify] = import_react4.default.useState(initStateVerifies);
   const nbAllVerifies = import_react4.default.useMemo(
-    () => validationRules && Object.values(validationRules).filter((rule) => rule).length || 0,
-    [validationRules]
+    () => validationRules && Object.values(validationRules).filter((rule) => rule).length || securityRules && securityRules.length || 0,
+    [validationRules, securityRules]
   );
+  const rules = import_react4.default.useMemo(
+    () => securityRules && securityRules.map(({ label, patternValidator, dataAttribute }) => ({
+      label,
+      validate: !!(patternValidator == null ? void 0 : patternValidator.test(inputValue)),
+      dataAttribute
+    })),
+    [inputValue, securityRules]
+  );
+  const calcPoints = import_react4.default.useMemo(() => {
+    if (validationRules) {
+      return Number((points / nbAllVerifies * 100).toFixed(0));
+    }
+    if (securityRules) {
+      const pts = (rules == null ? void 0 : rules.filter((rule) => rule.validate).length) || 0;
+      return Number((pts / nbAllVerifies * 100).toFixed(0));
+    }
+    return 0;
+  }, [points, nbAllVerifies, rules, validationRules, securityRules]);
   const widthGauge = import_react4.default.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%";
+    if (calcPoints <= 50 && calcPoints > 0) return "50%";
+    if (calcPoints <= 99 && calcPoints > 50) return "75%";
+    if (calcPoints === 100) return "100%";
     return "0%";
-  }, [points, nbAllVerifies]);
+  }, [calcPoints, nbAllVerifies]);
   const colorGauge = () => {
-    const calc = Number((points / nbAllVerifies * 100).toFixed(0));
-    if (calc <= 50 && calc > 0) return getColorStyle("ERROR" /* ERROR */);
-    if (calc <= 99 && calc > 50) return getColorStyle("WARNING" /* WARNING */);
-    if (calc === 100) return getColorStyle("SUCCESS" /* SUCCESS */);
+    if (calcPoints <= 50 && calcPoints > 0) return getColorStyle("ERROR" /* ERROR */);
+    if (calcPoints <= 99 && calcPoints > 50) return getColorStyle("WARNING" /* WARNING */);
+    if (calcPoints === 100) return getColorStyle("SUCCESS" /* SUCCESS */);
     return getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */);
   };
   const LengthvalidationRulesText = (0, import_react4.useMemo)(() => {
@@ -356,13 +373,14 @@ var useGauge = ({ validationRules, inputValue }) => {
     isLowerercaseVerify,
     isNumberVerify,
     isSpecialCharsVerify,
-    isUppercaseVerify
+    isUppercaseVerify,
+    rules
   };
 };
 
 // components/input/gauge/InputGauge.tsx
-var InputGauge = ({ validationRules, styled, inputValue }) => {
-  var _a, _b;
+var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
+  const id = (0, import_react5.useId)();
   const {
     widthGauge,
     colorGauge,
@@ -371,8 +389,9 @@ var InputGauge = ({ validationRules, styled, inputValue }) => {
     isLowerercaseVerify,
     isNumberVerify,
     isSpecialCharsVerify,
-    isUppercaseVerify
-  } = useGauge({ validationRules, inputValue });
+    isUppercaseVerify,
+    rules
+  } = useGauge({ validationRules, inputValue, securityRules });
   return /* @__PURE__ */ import_react5.default.createElement("div", { "data-testid": "security-gauge", className: hashClass(styled, (0, import_clsx3.default)("security-gauge-container")) }, /* @__PURE__ */ import_react5.default.createElement("div", { className: hashClass(styled, (0, import_clsx3.default)("security-gauge")) }, /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
@@ -380,19 +399,28 @@ var InputGauge = ({ validationRules, styled, inputValue }) => {
       style: { width: widthGauge, backgroundColor: colorGauge() },
       className: hashClass(styled, (0, import_clsx3.default)("gauge"))
     }
-  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: hashClass(styled, (0, import_clsx3.default)("security-gauge-verifies")) }, /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: hashClass(styled, (0, import_clsx3.default)("security-gauge-verifies")) }, validationRules && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.length),
-      dataAttribute: { "data-security-special-chars": true },
+      dataAttribute: { "data-security-length": true },
       type: LengthvalidationRulesText,
       classes: "security-length",
-      "data-length-min": (_a = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _a.min,
-      "data-length-max": (_b = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _b.max,
       color: isLengthVerify.color,
       iconName: isLengthVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    DataVerify,
+    {
+      display: !!(validationRules == null ? void 0 : validationRules.uppercase),
+      dataAttribute: { "data-security-uppercase": true },
+      classes: "security-uppercase",
+      type: "Majuscule",
+      color: isUppercaseVerify.color,
+      iconName: isUppercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
+      styled
+    }
   ), /* @__PURE__ */ import_react5.default.createElement(
     DataVerify,
     {
@@ -404,6 +432,17 @@ var InputGauge = ({ validationRules, styled, inputValue }) => {
       iconName: isSpecialCharsVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    DataVerify,
+    {
+      display: !!(validationRules == null ? void 0 : validationRules.lowercase),
+      dataAttribute: { "data-security-lowercase": true },
+      classes: "security-lowercase",
+      type: "Minuscule",
+      color: isLowerercaseVerify.color,
+      iconName: isLowerercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
+      styled
+    }
   ), /* @__PURE__ */ import_react5.default.createElement(
     DataVerify,
     {
@@ -415,27 +454,16 @@ var InputGauge = ({ validationRules, styled, inputValue }) => {
       iconName: isNumberVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
-  )), /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement(
-    DataVerify,
-    {
-      display: !!(validationRules == null ? void 0 : validationRules.uppercase),
-      dataAttribute: { "data-security-uppercase": true },
-      classes: "security-uppercase",
-      type: "Majuscule",
-      color: isUppercaseVerify.color,
-      iconName: isUppercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
-      styled
-    }
-  ), /* @__PURE__ */ import_react5.default.createElement(
+  )), securityRules && rules && rules.map((rule) => /* @__PURE__ */ import_react5.default.createElement(
     DataVerify,
     {
-      display: !!(validationRules == null ? void 0 : validationRules.lowercase),
-      dataAttribute: { "data-security-lowercase": true },
-      classes: "security-lowercase",
-      type: "Minuscule",
-      color: isLowerercaseVerify.color,
-      iconName: isLowerercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
-      styled
+      key: `${id}_${rule.label}`,
+      display: true,
+      type: rule.label,
+      color: rule.validate ? "SUCCESS" /* SUCCESS */ : "NEUTRAL" /* NEUTRAL */,
+      iconName: rule.validate ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
+      styled,
+      dataAttribute: rule.dataAttribute
     }
   ))));
 };
@@ -492,8 +520,10 @@ var Input = import_react6.default.forwardRef(
     iconNameRight,
     securityGauge,
     validationRules,
+    securityRules,
     required,
     readOnly,
+    autoCapitalize,
     ...others
   }, ref) => {
     const { styled } = useTrilogyContext();
@@ -605,6 +635,7 @@ var Input = import_react6.default.forwardRef(
         defaultValue,
         name,
         onSubmit,
+        autoCapitalize: type === "password" /* PASSWORD */ ? "off" : autoCapitalize || void 0,
         ref,
         disabled,
         minLength,
@@ -671,7 +702,15 @@ var Input = import_react6.default.forwardRef(
           }
         }
       }
-    ), loading && /* @__PURE__ */ import_react6.default.createElement("span", { className: loader })), help && /* @__PURE__ */ import_react6.default.createElement(Text_default, { className: helpClasses, id: idHelp }, help), securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react6.default.createElement(InputGauge_default, { validationRules, styled, inputValue: _value }));
+    ), loading && /* @__PURE__ */ import_react6.default.createElement("span", { className: loader })), help && /* @__PURE__ */ import_react6.default.createElement(Text_default, { className: helpClasses, id: idHelp }, help), securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react6.default.createElement(
+      InputGauge_default,
+      {
+        validationRules,
+        securityRules,
+        styled,
+        inputValue: _value
+      }
+    ));
   }
 );
 Input.displayName = "Input" /* Input */;

package/lib/components/input/Input.mjs

@@ -1,26 +1,29 @@
 "use client";
 import {
   Input_default
-} from "../../chunk-WCYJXOFQ.mjs";
-import "../../chunk-GRGNRLCK.mjs";
-import "../../chunk-VOIEK4BP.mjs";
+} from "../../chunk-3HY3E3O3.mjs";
+import "../../chunk-HSBIO24M.mjs";
+import "../../chunk-DZORJA3B.mjs";
+import "../../chunk-MAMQO43Y.mjs";
+import "../../chunk-HQESKFCX.mjs";
+import "../../chunk-DB5J6PBL.mjs";
+import "../../chunk-A4CI2ZMI.mjs";
+import "../../chunk-6CVNPSI3.mjs";
+import "../../chunk-ZUSPKNMI.mjs";
+import "../../chunk-Y3ROARMA.mjs";
+import "../../chunk-LGL3XQ7F.mjs";
+import "../../chunk-ALGX47MZ.mjs";
+import "../../chunk-XXKEMYTB.mjs";
 import "../../chunk-BVZWKYND.mjs";
 import "../../chunk-HHE7L3CW.mjs";
 import "../../chunk-CYVPQJFF.mjs";
 import "../../chunk-P6NVOAAH.mjs";
 import "../../chunk-A35Q44N2.mjs";
-import "../../chunk-MAMQO43Y.mjs";
-import "../../chunk-HQESKFCX.mjs";
-import "../../chunk-DB5J6PBL.mjs";
-import "../../chunk-A4CI2ZMI.mjs";
 import "../../chunk-F5FPTZND.mjs";
-import "../../chunk-ACSGONQB.mjs";
-import "../../chunk-JA5LYEG4.mjs";
-import "../../chunk-AD63JH53.mjs";
-import "../../chunk-Y3ROARMA.mjs";
-import "../../chunk-SGAZRZIK.mjs";
-import "../../chunk-WC3ULY5W.mjs";
-import "../../chunk-JOSZ4COK.mjs";
+import "../../chunk-5QUXSOHX.mjs";
+import "../../chunk-RVE7QNTO.mjs";
+import "../../chunk-7VSJ3RTI.mjs";
+import "../../chunk-P372ZF3A.mjs";
 import "../../chunk-SWVRRUW7.mjs";
 import "../../chunk-Y7CEUBIZ.mjs";
 import "../../chunk-HU3FAWMX.mjs";
@@ -49,21 +52,18 @@ import "../../chunk-XIQL4ZTN.mjs";
 import "../../chunk-UUXUTBLZ.mjs";
 import "../../chunk-QOEJLTZN.mjs";
 import "../../chunk-B6WC6WS2.mjs";
-import "../../chunk-K2VWHGPL.mjs";
+import "../../chunk-MAX3RSBG.mjs";
 import "../../chunk-6BTWLQPI.mjs";
 import "../../chunk-G6BHSMLA.mjs";
 import "../../chunk-THOTRBD4.mjs";
 import "../../chunk-ATW7ITPH.mjs";
 import "../../chunk-IGMJNGTZ.mjs";
-import "../../chunk-5QUXSOHX.mjs";
 import "../../chunk-L4UDEKQK.mjs";
-import "../../chunk-P372ZF3A.mjs";
-import "../../chunk-HV6TXVFA.mjs";
-import "../../chunk-CYNSXZSV.mjs";
-import "../../chunk-YK5HPRX4.mjs";
+import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-RYABO2EX.mjs";
 import "../../chunk-4ZJQXF2V.mjs";
 import "../../chunk-4UHBBNZ7.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   Input_default as default

package/lib/components/input/Input.native.d.mts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextInput } from 'react-native';
-import { InputNativeProps } from './InputProps';
+import { InputNativeEvents, InputProps } from './InputProps';
+export interface InputNativeProps extends InputProps, InputNativeEvents {
+}
 /**
  * Input Native Component
  * @param name {string} Input name

package/lib/components/input/Input.native.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextInput } from 'react-native';
-import { InputNativeProps } from './InputProps';
+import { InputNativeEvents, InputProps } from './InputProps';
+export interface InputNativeProps extends InputProps, InputNativeEvents {
+}
 /**
  * Input Native Component
  * @param name {string} Input name