nvis-fe-cms-libs 2.0.9 → 2.1.1

package/dist/nvis-fe-cms-libs.umd.js

@@ -2903,7 +2903,7 @@ var __async = (__this, __arguments, generator) => {
     ]
   ];
   const Zap = createLucideIcon("zap", __iconNode);
-  const DiagramSection = ({ data, t, isDarkMode }) => {
+  const DiagramSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     var _a, _b;
     const [mounted, setMounted] = require$$0.useState(false);
     const [isMobile, setIsMobile] = require$$0.useState(false);
@@ -2921,12 +2921,55 @@ var __async = (__this, __arguments, generator) => {
       return () => window.removeEventListener("resize", checkMobile);
     }, []);
     const diagramData = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.data;
+    const getImageUrl = (images) => {
+      console.log("getImageUrl called with:", images);
+      console.log("Type of images:", typeof images);
+      if (!images) {
+        console.log("No images found");
+        return null;
+      }
+      let imageUrl;
+      if (typeof images === "string") {
+        imageUrl = images;
+      } else if (Array.isArray(images) && images.length > 0) {
+        imageUrl = images[0];
+      } else {
+        console.log("Invalid images format");
+        return null;
+      }
+      console.log("Image URL:", imageUrl);
+      if (!imageUrl || imageUrl.trim() === "") {
+        console.log("Image URL is empty");
+        return null;
+      }
+      if (imageUrl.startsWith("http")) {
+        console.log("Full URL (already has http):", imageUrl);
+        return imageUrl;
+      }
+      const fullUrl = `${imageBaseUrl}${imageUrl}`;
+      console.log("Full URL:", fullUrl);
+      return fullUrl;
+    };
     if (!diagramData) {
       return null;
     }
     const diagramName = diagramData.name || safeT("diagram.defaults.name");
     const diagramDescription = diagramData.description || safeT("diagram.defaults.description");
     const modules = diagramData.diagramChildrenDTOs || [];
+    require$$0.useEffect(() => {
+      console.log("=== DIAGRAM MODULES DEBUG ===");
+      console.log("Total modules:", modules.length);
+      console.log("imageBaseUrl:", imageBaseUrl);
+      modules.forEach((module2, index2) => {
+        console.log(`Module ${index2 + 1}:`, {
+          name: module2.name,
+          images: module2.images,
+          imagesType: typeof module2.images,
+          isArray: Array.isArray(module2.images),
+          hasImages: Boolean(module2.images)
+        });
+      });
+    }, [modules, imageBaseUrl]);
     const getIconComponent = (iconName) => {
       const icons = {
         Calculator,
@@ -3015,15 +3058,30 @@ var __async = (__this, __arguments, generator) => {
                 animation: `slideUp 0.5s ease-out ${index2 * 0.1}s both`
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "div",
                   {
-                    className: "flex-shrink-0 p-3 rounded-xl border",
+                    className: "flex-shrink-0 p-3 rounded-xl border bg-surface",
                     style: {
                       backgroundColor: `${colors.iconBg}33`,
                       borderColor: colors.border
                     },
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2 })
+                    children: [
+                      module2.images ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "img",
+                        {
+                          src: getImageUrl(module2.images),
+                          alt: module2.name,
+                          className: "w-6 h-6 object-contain",
+                          onError: (e) => {
+                            console.error("Image load error:", e.target.src);
+                            e.target.style.display = "none";
+                            e.target.nextElementSibling.style.display = "block";
+                          }
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2, style: { display: module2.images ? "none" : "block" } })
+                    ]
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
@@ -3279,7 +3337,7 @@ var __async = (__this, __arguments, generator) => {
           ] }, `line-${module2.id}`);
         }) }),
         modules.map((module2, index2) => {
-          const Icon2 = getIconComponent(module2.icon);
+          getIconComponent(module2.icon);
           const colors = getColorStyles(index2);
           const angle = angles[index2] * Math.PI / 180;
           const radius = 360;
@@ -3287,6 +3345,7 @@ var __async = (__this, __arguments, generator) => {
           const y = Math.sin(angle) * radius;
           const normalizedAngle = (angles[index2] % 360 + 360) % 360;
           const isRightSide = normalizedAngle > 270 || normalizedAngle < 90;
+          const isTopHalf = y < 0;
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             "a",
             {
@@ -3321,36 +3380,40 @@ var __async = (__this, __arguments, generator) => {
                         style: { borderColor: colors.border }
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "flex-shrink-0 p-2.5 rounded-lg border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10",
-                        style: {
-                          backgroundColor: `${colors.iconBg}33`,
-                          borderColor: colors.border
-                        },
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-inverse", strokeWidth: 2 })
-                      }
-                    ),
                     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-inverse text-small tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module2.name }),
                     /* @__PURE__ */ jsxRuntimeExports.jsxs(
                       "div",
                       {
-                        className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs ${isDarkMode ? "bg-surface" : "bg-body"}`,
+                        className: `absolute ${isTopHalf ? "top-full mt-4" : "bottom-full mb-4"} left-1/2 -translate-x-1/2 px-6 py-4 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-50 border-2 ${isDarkMode ? "bg-surface" : "bg-body"}`,
                         style: {
                           borderColor: "var(--border-color)",
-                          maxHeight: "120px",
-                          overflowY: "auto"
+                          maxHeight: "400px",
+                          minWidth: "320px",
+                          maxWidth: "420px",
+                          overflowY: "auto",
+                          whiteSpace: "normal"
                         },
                         children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-main", children: module2.name }),
-                          module2.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-caption text-muted mt-1", children: module2.description }),
+                          module2.images && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "img",
+                            {
+                              src: getImageUrl(module2.images),
+                              alt: module2.name,
+                              className: "w-full h-48 object-cover rounded-lg",
+                              onError: (e) => {
+                                console.error("Tooltip image load error:", e.target.src);
+                                e.target.style.display = "none";
+                              }
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-base text-main font-bold mb-2", children: module2.name }),
+                          module2.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-muted leading-relaxed", children: module2.description }),
                           /* @__PURE__ */ jsxRuntimeExports.jsx(
                             "div",
                             {
-                              className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent",
+                              className: `absolute ${isTopHalf ? "bottom-full" : "top-full"} left-1/2 -translate-x-1/2 ${isTopHalf ? "-mb-px" : "-mt-px"} border-8 border-transparent`,
                               style: {
-                                borderTopColor: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
+                                [isTopHalf ? "borderBottomColor" : "borderTopColor"]: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
                               }
                             }
                           )