@nickaux/form-configurator 1.1.219 → 1.1.221

package/dist/FormConfigurator.esm.js

@@ -39043,7 +39043,15 @@ if (process.env.NODE_ENV === "production") {
   m$1.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 }
 const checkUserRole = (p_user, p_role) => {
-  return true;
+  var _a, _b;
+  if (p_user === null) {
+    return false;
+  }
+  const userRole = ((_b = (_a = p_user == null ? void 0 : p_user.appUser) == null ? void 0 : _a.roles) == null ? void 0 : _b.length) ? p_user.appUser.roles : ["user"];
+  if (userRole) {
+    return userRole.includes(p_role);
+  }
+  return false;
 };
 const autoFormatValue = (p_value) => {
   let r_value = p_value;
@@ -39765,7 +39773,7 @@ const Field = forwardRef(({ field, children }, ref2) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const [renderCounter, setRenderCounter] = useState(0);
   let previousFocusedElement = null;
-  const isUserAdmin = checkUserRole(field.formManager.options.user);
+  const isUserAdmin = checkUserRole(field.formManager.options.user, "admin");
   useImperativeHandle(ref2, () => ({
     updateField: () => {
       previousFocusedElement = document.activeElement;
@@ -136620,9 +136628,6 @@ class TypeFile extends TypeDefault {
   }
 }
 class TypeColorPicker extends TypeDefault {
-  // initValue(p_field) {
-  //   return "";
-  // }
   getComponent() {
     return ({
       getValue: getValue2 = () => "",
@@ -136630,15 +136635,12 @@ class TypeColorPicker extends TypeDefault {
       onChange: onChange3 = false,
       initComponent = false
     }, ...props) => {
-      const [fieldValue2, setFieldValue] = useState(
-        getValue2() ? getValue2() : ""
-      );
+      const [fieldValue2, setFieldValue] = useState(getValue2() || "");
       const [colorPickerColorValue, setColorPickerColorValue] = useState(
-        getValue2() ? getValue2() : ""
+        getValue2() || ""
       );
       const [displayColorPicker, setDisplayColorPicker] = useState(false);
-      const popoverRef = useRef(false);
-      const inputRef = useRef(false);
+      const popoverRef = useRef(null);
       const changeValue = () => {
         setFieldValue(colorPickerColorValue);
         if (onChange3) {
@@ -136657,31 +136659,98 @@ class TypeColorPicker extends TypeDefault {
         setDisplayColorPicker(false);
       };
       const handleOutsideClick = (e2) => {
-        if (!popoverRef.current.contains(e2.target)) {
+        if (popoverRef.current && !popoverRef.current.contains(e2.target)) {
           handleClose();
         }
       };
-      const displayLabel = !param.displayLabel || param.displayLabel !== "notDisplay";
-      displayLabel && param.label ? /* @__PURE__ */ jsx$2("label", { children: param.label }) : "";
-      if (this.userAllow === "read-only") {
-        return /* @__PURE__ */ jsx$2(
-          "div",
-          {
-            style: {
-              width: "36px",
-              height: "14px",
-              borderRadius: "2px",
-              background: `${fieldValue2}`
-            }
+      const selectTransparent = () => {
+        setColorPickerColorValue("transparent");
+        setFieldValue("transparent");
+        if (onChange3) {
+          onChange3("transparent");
+        }
+        handleClose();
+      };
+      const copyToClipboard = (text2, format2) => {
+        navigator.clipboard.writeText(text2).then(
+          () => {
+            alert(`Valeur ${format2} copiée : ${text2}`);
+          },
+          () => {
+            alert("Échec de la copie dans le presse-papiers !");
           }
         );
-      } else {
-        const cssColor = {
-          width: "36px",
-          height: "14px",
-          borderRadius: "2px",
-          background: `${fieldValue2}`
+      };
+      useEffect(() => {
+        if (displayColorPicker) {
+          document.addEventListener("mousedown", handleOutsideClick);
+        } else {
+          document.removeEventListener("mousedown", handleOutsideClick);
+        }
+        return () => {
+          document.removeEventListener("mousedown", handleOutsideClick);
+        };
+      }, [displayColorPicker]);
+      const displayLabel = !param.displayLabel || param.displayLabel !== "notDisplay";
+      const label = displayLabel && param.label ? /* @__PURE__ */ jsx$2("label", { children: param.label }) : "";
+      const getColorLabel = () => {
+        if (fieldValue2 === "transparent" || !fieldValue2) {
+          return {
+            rgba: "0, 0, 0, 0",
+            hex: "transparent"
+          };
+        }
+        const rgb = fieldValue2.startsWith("#") ? {
+          r: parseInt(fieldValue2.substring(1, 3), 16),
+          g: parseInt(fieldValue2.substring(3, 5), 16),
+          b: parseInt(fieldValue2.substring(5, 7), 16)
+        } : null;
+        if (rgb) {
+          return {
+            rgba: `${rgb.r}, ${rgb.g}, ${rgb.b}, 1`,
+            hex: fieldValue2
+          };
+        }
+        return {
+          rgba: "Invalid color",
+          hex: ""
         };
+      };
+      const colorInfo = getColorLabel();
+      const cssWrapper = {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px"
+      };
+      const cssColor = {
+        width: "36px",
+        height: "14px",
+        borderRadius: "2px",
+        background: fieldValue2 === "transparent" ? "repeating-linear-gradient(45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px)" : `${fieldValue2}`,
+        border: "1px solid #ccc"
+      };
+      const cssColorInfo = {
+        fontSize: "12px",
+        fontStyle: "italic",
+        lineHeight: "1.4",
+        cursor: "pointer"
+        // Curseur interactif
+      };
+      if (this.userAllow === "read-only") {
+        return /* @__PURE__ */ jsxs("div", { style: cssWrapper, children: [
+          /* @__PURE__ */ jsx$2("div", { style: cssColor }),
+          /* @__PURE__ */ jsxs("div", { style: cssColorInfo, children: [
+            /* @__PURE__ */ jsxs("div", { onClick: () => copyToClipboard(colorInfo.rgba, "RGBA"), children: [
+              "RGBA: ",
+              colorInfo.rgba
+            ] }),
+            /* @__PURE__ */ jsxs("div", { onClick: () => copyToClipboard(colorInfo.hex, "HEX"), children: [
+              "HEX: ",
+              colorInfo.hex
+            ] })
+          ] })
+        ] });
+      } else {
         const cssSwatch = {
           padding: "5px",
           background: "#fff",
@@ -136695,34 +136764,82 @@ class TypeColorPicker extends TypeDefault {
           zIndex: "30",
           padding: "8px",
           backgroundColor: "#FFFFFF",
-          border: "solid 1px #cccc",
+          border: "solid 1px #ccc",
           borderRadius: "5px",
           boxShadow: "0 0 5px rgba(0,0,0,0.2)"
         };
-        React__default.useEffect(() => {
-          if (displayColorPicker) {
-            document.addEventListener("mousedown", handleOutsideClick);
-          } else {
-            document.removeEventListener("mousedown", handleOutsideClick);
-          }
-          return () => {
-            document.removeEventListener("mousedown", handleOutsideClick);
-          };
-        }, [displayColorPicker]);
         return /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx$2("div", { style: cssSwatch, onClick: handleClick, children: /* @__PURE__ */ jsx$2("div", { style: cssColor }) }),
+          label,
+          /* @__PURE__ */ jsxs("div", { style: cssWrapper, children: [
+            /* @__PURE__ */ jsx$2("div", { style: cssSwatch, onClick: handleClick, children: /* @__PURE__ */ jsx$2("div", { style: cssColor }) }),
+            /* @__PURE__ */ jsxs("div", { style: cssColorInfo, children: [
+              /* @__PURE__ */ jsxs("div", { onClick: () => copyToClipboard(colorInfo.rgba, "RGBA"), children: [
+                "RGBA: ",
+                colorInfo.rgba
+              ] }),
+              /* @__PURE__ */ jsxs("div", { onClick: () => copyToClipboard(colorInfo.hex, "HEX"), children: [
+                "HEX: ",
+                colorInfo.hex
+              ] })
+            ] })
+          ] }),
           displayColorPicker ? /* @__PURE__ */ jsxs("div", { ref: popoverRef, style: cssPopover, children: [
             /* @__PURE__ */ jsx$2(
               ChromePicker,
               {
-                ref: inputRef,
                 color: colorPickerColorValue,
                 onChange: pickValue
               }
             ),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx$2("button", { type: "btn btn-type1", onClick: handleClose, style: { width: "100%" }, children: "annuler" }),
-              /* @__PURE__ */ jsx$2("button", { type: "btn btn-type2", onClick: changeValue, style: { width: "100%" }, children: "Choisir" })
+            /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
+              /* @__PURE__ */ jsx$2(
+                "button",
+                {
+                  type: "button",
+                  onClick: selectTransparent,
+                  style: {
+                    width: "100%",
+                    marginBottom: "5px",
+                    background: "#eee",
+                    border: "1px solid #ccc",
+                    padding: "5px",
+                    cursor: "pointer"
+                  },
+                  children: "Aucune couleur"
+                }
+              ),
+              /* @__PURE__ */ jsx$2(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClose,
+                  style: {
+                    width: "48%",
+                    marginRight: "4%",
+                    background: "#f5f5f5",
+                    border: "1px solid #ccc",
+                    padding: "5px",
+                    cursor: "pointer"
+                  },
+                  children: "Annuler"
+                }
+              ),
+              /* @__PURE__ */ jsx$2(
+                "button",
+                {
+                  type: "button",
+                  onClick: changeValue,
+                  style: {
+                    width: "48%",
+                    background: "#007BFF",
+                    border: "1px solid #007BFF",
+                    color: "white",
+                    padding: "5px",
+                    cursor: "pointer"
+                  },
+                  children: "Choisir"
+                }
+              )
             ] })
           ] }) : null
         ] });
@@ -148851,6 +148968,7 @@ class FormManager {
         });
       }
     });
+    // loop on all fields in fieldsByNode and get value if visible ( recursive )
     __publicField(this, "getVisibleValue", (field = {
       id: "__result__",
       children: this.formElements.map((o2) => this.fieldsByPath[o2.id]),
@@ -148951,6 +149069,7 @@ class FormManager {
       });
     }
   }
+  // use for repeater
   createDynamicField(field, p_position, p_data = null) {
     const uniqueId = v4();
     this.dynamicPathPart[uniqueId] = p_position;
@@ -149011,6 +149130,11 @@ class FormManager {
     delete this.dynamicPathPart[p_itemId];
     delete this.fields[p_itemId];
   }
+  //
+  // removeDynamicField(p_uniqueId){
+  //   this.dynamicPathPart[p_uniqueId] =false;
+  // }
+  //
   getField(p_item, v_item, custom_id, parentUid) {
     if (typeField[v_item.format]) {
       const currentTypeField = new typeField[v_item.format](
@@ -149035,6 +149159,7 @@ class FormManager {
       return false;
     }
   }
+  // get field path like path for data
   getNormalizedFieldPath(path) {
     const normalizedFieldPath = [];
     var paths = ("" + path).split("__");
@@ -149151,6 +149276,8 @@ class FormManager {
       return newField;
     }) : [];
   }
+  initValueForm() {
+  }
   resolveFieldRefs(formJson, fieldsRefJson) {
     const resolveRefsInForm = (formItem) => {
       if (formItem.fieldRef && fieldsRefJson[formItem.fieldRef]) {
@@ -149186,6 +149313,45 @@ class FormManager {
     }
     return formData;
   }
+  // getMaxContentLevel(p_item) {
+  //   let maxContentLevel = 0;
+  //   let rootItem = p_item;
+  //   // Vérifier si l'élément est un tableau
+  //   if (p_item && Array.isArray(p_item)) {
+  //     p_item.forEach((item) => {
+  //       if (item?.content) {
+  //         // Appeler récursivement pour trouver le niveau maximum
+  //         const currentContent = this.getMaxContentLevel(item.content);
+  //         if (currentContent.lvl > maxContentLevel) {
+  //           maxContentLevel = currentContent.lvl;
+  //           rootItem = item;
+  //         }
+  //       }
+  //     });
+  //   }
+  //   // Retourner le niveau de contenu maximum et l'élément racine associé
+  //   return { lvl: maxContentLevel + 1, rootItem: rootItem };
+  // }
+  // getMaxDepthOfContent(content) {
+  //   let maxDepth = 0;
+  //   const traverse = (items, depth = 1) => {
+  //     if (Array.isArray(items)) {
+  //       items.forEach((item) => {
+  //         if (item?.content && Array.isArray(item.content)) {
+  //           traverse(item.content, depth + 1);
+  //         }
+  //         if (item?.forms?.content && Array.isArray(item.forms.content)) {
+  //           traverse(item.forms.content, depth + 1);
+  //         }
+  //       });
+  //     }
+  //     if (depth > maxDepth) {
+  //       maxDepth = depth;
+  //     }
+  //   };
+  //   traverse(content);
+  //   return maxDepth;
+  // }
   /**
    * Charge et fusionne un nœud JSON représentant un formulaire ou une structure de données.
    *
@@ -149200,7 +149366,7 @@ class FormManager {
     if (p_item == null ? void 0 : p_item._fieldRefLinked) {
       return p_item;
     }
-    if (p_item.fieldRef) {
+    if (p_item.fieldRef && !(p_item == null ? void 0 : p_item._fieldRefLinked)) {
       if ((_a = this.fieldsRef) == null ? void 0 : _a[p_item.fieldRef]) {
         p_item.id = (p_item == null ? void 0 : p_item.id) ?? p_item.fieldRef;
         p_item = _.merge(
@@ -149208,6 +149374,7 @@ class FormManager {
           this.fieldsRef[p_item.fieldRef],
           _.cloneDeep(p_item)
         );
+        p_item.content = this.fieldsRef[p_item.fieldRef].content;
         const refContent = (_b = this.fieldsRef[p_item.fieldRef]) == null ? void 0 : _b.content;
         if (refContent) {
           if (((_c = p_item.content) == null ? void 0 : _c.length) && Array.isArray(p_item.content)) {
@@ -149247,6 +149414,8 @@ class FormManager {
     }
     return p_item;
   }
+  //initNodevValue: (p_node) => {},
+  // check value of current field from validity param
   checkValidity(item, p_TreeId = null, p_data = null) {
     let resultCheckValidity = { type: "success", message: "" };
     if (item["validity"] && Array.isArray(item["validity"]) && item["validity"].length) {
@@ -149296,7 +149465,8 @@ class FormManager {
             resultCheckValidity = regex.test(testFieldValue) ? { type: "success", message: "" } : { type: "error", message: condition["message"] };
             break;
           case "mandatory":
-            resultCheckValidity = testFieldValue !== "" && testFieldValue !== null && testFieldValue !== void 0 && testFieldValue !== false && (typeof testFieldValue !== "object" || typeof testFieldValue === "object" && Object.keys(testFieldValue).length !== 0) ? { type: "success", message: "" } : { type: "error", message: condition["message"] };
+            resultCheckValidity = testFieldValue !== "" && testFieldValue !== null && testFieldValue !== void 0 && testFieldValue !== false && // and test empty object or empty array
+            (typeof testFieldValue !== "object" || typeof testFieldValue === "object" && Object.keys(testFieldValue).length !== 0) ? { type: "success", message: "" } : { type: "error", message: condition["message"] };
             break;
           case "compare":
             resultCheckValidity = testValue(
@@ -149324,6 +149494,7 @@ class FormManager {
     this.validityResult[item.id] = resultCheckValidity;
     return resultCheckValidity;
   }
+  // check only first condition
   checkCondition(item, p_TreeId = null, p_data = null) {
     const evaluateCondition = (condition, treeId) => {
       const operator = condition["operator"];