@aatulwork/customform-renderer 1.13.0 → 1.14.0

package/dist/index.js

@@ -1453,6 +1453,39 @@ var FieldView = ({ field, value, services, colors }) => {
   if (field.type === "formReference" || field.type === "apiReference") {
     return /* @__PURE__ */ jsxRuntime.jsx(ReferenceFieldView, { field, value, services });
   }
+  if (field.type === "color") {
+    const colorValue = value && typeof value === "string" ? value : "#000000";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          py: 1.5,
+          px: 1,
+          borderColor: "divider"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: value ? /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                width: 30,
+                height: 30,
+                backgroundColor: colorValue,
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: 1
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { color: "text.disabled", fontStyle: "italic" }, children: "\u2014" }) })
+        ]
+      },
+      field.name
+    );
+  }
   if (field.type === "ckeditor") {
     if (CKEditorDisplayComponent) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1670,6 +1703,8 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
         return labels.join(", ");
       }
       return getLabelForValue(values[0]);
+    case "color":
+      return value ? String(value) : "\u2014";
     case "radio":
       if (field.options) {
         const normalizedOptions = normalizeOptions(field.options);