@nickaux/form-configurator 1.1.220 → 1.1.221

package/dist/FormConfigurator.esm.js

@@ -136628,9 +136628,6 @@ class TypeFile extends TypeDefault {
   }
 }
 class TypeColorPicker extends TypeDefault {
-  // initValue(p_field) {
-  //   return "";
-  // }
   getComponent() {
     return ({
       getValue: getValue2 = () => "",
@@ -136638,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) {
@@ -136665,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",
@@ -136703,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
         ] });