@solidxai/core-ui 0.1.2 → 0.1.3

package/dist/components/core/common/SolidGlobalSearchElement.tsx

@@ -378,8 +378,14 @@ const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, ope
     return (
         <div className="flex align-items-center justify-content-between gap-2">
             <div>
-                <Button text size="small" className="text-base py-1 w-full" severity={Number(activeSavedFilter) == savedfilter.id ? "secondary" : "contrast"} onClick={() => applySavedFilter(savedfilter)}>{savedfilter.name}</Button>
-                {savedfilter?.description && <p className="text-xs pl-3">{savedfilter?.description}</p>}
+                <Button text
+                    size="small"
+                    className="text-base py-1 w-full"
+                    severity={Number(activeSavedFilter) == savedfilter.id ? "secondary" : "contrast"}
+                    onClick={() => applySavedFilter(savedfilter)}
+                    tooltip={savedfilter?.description}>{savedfilter.name}
+                </Button>
+                {/* {savedfilter?.description && <p className="text-xs pl-3">{savedfilter?.description}</p>} */}
             </div>
             <div className="flex align-items-center gap-2">
                 <Button
@@ -422,6 +428,57 @@ const replacePlaceholders = (obj: any, searchValue: string): any => {
     return obj;
 };
 
+
+const extractChips = (node: any): any[] => {
+    if (!node) return [];
+
+    // If node has $and
+    if (node.$and && Array.isArray(node.$and)) {
+        return node.$and.flatMap(extractChips);
+    }
+
+    // If node has $or
+    if (node.$or && Array.isArray(node.$or)) {
+        return node.$or.flatMap(extractChips);
+    }
+
+    // Leaf condition
+    const field = Object.keys(node)[0];
+    const operatorObj = node[field];
+
+    // ✅ Normal case
+    if (operatorObj?.$containsi) {
+        return [{
+            columnName: field,
+            value: operatorObj.$containsi,
+            columnDisplayName: field.charAt(0).toUpperCase() + field.slice(1),
+            searchField: field,
+            matchMode: "$containsi"
+        }];
+    }
+    // ✅ Nested case (like city.name)
+    else if (typeof operatorObj === "object") {
+        const nestedField = Object.keys(operatorObj)[0];
+        const nestedOperatorObj = operatorObj[nestedField];
+
+        const operatorKey = nestedOperatorObj
+            ? Object.keys(nestedOperatorObj).find(k => k.startsWith("$"))
+            : null;
+
+        if (operatorKey) {
+            return [{
+                columnName: field,
+                value: nestedOperatorObj[operatorKey],
+                columnDisplayName: field.charAt(0).toUpperCase() + field.slice(1),
+                searchField: `${field}.${nestedField}`,
+                matchMode: operatorKey
+            }];
+        }
+    }
+
+    return [];
+};
+
 type RelationCache = Map<string, { label: string; value: number }>;
 
 
@@ -638,16 +695,19 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 }
                 if (searchChips) {
                     setSearchFilter(searchChips);
-                    const formattedChips = searchChips?.$and.map((chip: any, key: any) => {
-                        const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
-                        const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
-                        const chipdata = {
-                            columnName: chipKey,
-                            value: chipValue
-                        };
-                        return chipdata
-                    }
-                    );
+                    // const formattedChips = searchChips?.$and.map((chip: any, key: any) => {
+                    //     const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                    //     const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
+                    //     const chipdata = {
+                    //         columnName: chipKey,
+                    //         value: chipValue
+                    //     };
+                    //     return chipdata
+                    // }
+                    // );
+                    // setSearchChips(formattedChips);
+
+                    const formattedChips = extractChips(searchChips);
                     setSearchChips(formattedChips);
 
                 }
@@ -680,17 +740,20 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 }
                 if (filterPredicates?.search_predicate && filterPredicates?.search_predicate !== searchFilter) {
                     setSearchFilter(filterPredicates?.search_predicate);
-                    const formattedChips = filterPredicates.search_predicate?.$and.map((chip: any, key: any) => {
-                        const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
-                        const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
-                        const chipdata = {
-                            columnName: chipKey,
-                            value: chipValue
-                        };
-                        return chipdata
-                    }
-                    );
+                    // const formattedChips = filterPredicates.search_predicate?.$and.map((chip: any, key: any) => {
+                    //     const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                    //     const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
+                    //     const chipdata = {
+                    //         columnName: chipKey,
+                    //         value: chipValue
+                    //     };
+                    //     return chipdata
+                    // }
+                    // );
+                    // setSearchChips(formattedChips);
+                    const formattedChips = extractChips(filterPredicates.search_predicate);
                     setSearchChips(formattedChips);
+
                 }
             }
         }

package/dist/components/core/common/SolidImageViewer.d.ts

@@ -0,0 +1,10 @@
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export interface SolidImageViewerProps {
+    images: string[];
+    open: boolean;
+    onClose: () => void;
+    viewerOptions?: Viewer.Options;
+}
+export declare const SolidImageViewer: ({ images, open, onClose, viewerOptions, }: SolidImageViewerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidImageViewer.d.ts.map

package/dist/components/core/common/SolidImageViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidImageViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/SolidImageViewer.tsx"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,8CAK1B,qBAAqB,4CAmEvB,CAAC"}

package/dist/components/core/common/SolidImageViewer.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export var SolidImageViewer = function (_a) {
+    var images = _a.images, open = _a.open, onClose = _a.onClose, viewerOptions = _a.viewerOptions;
+    var containerRef = useRef(null);
+    var viewerRef = useRef(null);
+    // Initialize viewer
+    useEffect(function () {
+        if (!containerRef.current || images.length === 0)
+            return;
+        if (viewerRef.current) {
+            viewerRef.current.destroy();
+        }
+        viewerRef.current = new Viewer(containerRef.current, __assign({ navbar: images.length > 1, title: false, transition: true, movable: true, scalable: true, rotatable: true, zoomable: true, zIndex: 9999, hidden: function () {
+                onClose();
+            }, toolbar: {
+                prev: 1,
+                next: 1,
+                zoomIn: 1,
+                zoomOut: 1,
+                rotateLeft: 1,
+                rotateRight: 1,
+                reset: 1,
+            } }, viewerOptions));
+        return function () {
+            if (viewerRef.current) {
+                viewerRef.current.destroy();
+                viewerRef.current = null;
+            }
+        };
+    }, [images, open]);
+    // Show viewer when open becomes true
+    useEffect(function () {
+        if (open && viewerRef.current) {
+            viewerRef.current.show();
+        }
+    }, [open]);
+    return (_jsx("div", { ref: containerRef, style: {
+            position: "absolute",
+            visibility: "hidden",
+            width: 0,
+            height: 0,
+            overflow: "hidden",
+        }, children: images.map(function (src, index) { return (_jsx("img", { src: src, alt: "preview-".concat(index) }, index)); }) }));
+};
+//# sourceMappingURL=SolidImageViewer.js.map

package/dist/components/core/common/SolidImageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidImageViewer.js","sourceRoot":"","sources":["../../../../src/components/core/common/SolidImageViewer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AASlC,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAKT;QAJpB,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,aAAa,mBAAA;IAEb,IAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACzD,IAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE9C,oBAAoB;IACpB,SAAS,CAAC;QACN,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAEzD,IAAI,SAAS,CAAC,OAAO,EAAE;YACnB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;SAC/B;QAED,SAAS,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,OAAO,aAC/C,MAAM,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE;gBACJ,OAAO,EAAE,CAAC;YACd,CAAC,EACD,OAAO,EAAE;gBACL,IAAI,EAAE,CAAC;gBACP,IAAI,EAAE,CAAC;gBACP,MAAM,EAAE,CAAC;gBACT,OAAO,EAAE,CAAC;gBACV,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE,CAAC;aACX,IACE,aAAa,EAClB,CAAC;QAEH,OAAO;YACH,IAAI,SAAS,CAAC,OAAO,EAAE;gBACnB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC5B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;aAC5B;QACL,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnB,qCAAqC;IACrC,SAAS,CAAC;QACN,IAAI,IAAI,IAAI,SAAS,CAAC,OAAO,EAAE;YAC3B,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SAC5B;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACH,cACI,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;YACH,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,QAAQ,EAAE,QAAQ;SACrB,YAEA,MAAM,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,IAAK,OAAA,CACxB,cAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,kBAAW,KAAK,CAAE,IAAxC,KAAK,CAAuC,CACzD,EAF2B,CAE3B,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useRef } from \"react\";\nimport Viewer from \"viewerjs\";\nimport \"viewerjs/dist/viewer.css\";\n\nexport interface SolidImageViewerProps {\n    images: string[];\n    open: boolean;\n    onClose: () => void;\n    viewerOptions?: Viewer.Options;\n}\n\nexport const SolidImageViewer = ({\n    images,\n    open,\n    onClose,\n    viewerOptions,\n}: SolidImageViewerProps) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const viewerRef = useRef<Viewer | null>(null);\n\n    // Initialize viewer\n    useEffect(() => {\n        if (!containerRef.current || images.length === 0) return;\n\n        if (viewerRef.current) {\n            viewerRef.current.destroy();\n        }\n\n        viewerRef.current = new Viewer(containerRef.current, {\n            navbar: images.length > 1, // show navbar only if multiple\n            title: false,\n            transition: true,\n            movable: true,\n            scalable: true,\n            rotatable: true,\n            zoomable: true,\n            zIndex: 9999,\n            hidden: () => {\n                onClose();\n            },\n            toolbar: {\n                prev: 1,\n                next: 1,\n                zoomIn: 1,\n                zoomOut: 1,\n                rotateLeft: 1,\n                rotateRight: 1,\n                reset: 1,\n            },\n            ...viewerOptions,\n        });\n\n        return () => {\n            if (viewerRef.current) {\n                viewerRef.current.destroy();\n                viewerRef.current = null;\n            }\n        };\n    }, [images, open]);\n\n    // Show viewer when open becomes true\n    useEffect(() => {\n        if (open && viewerRef.current) {\n            viewerRef.current.show();\n        }\n    }, [open]);\n\n    return (\n        <div\n            ref={containerRef}\n            style={{\n                position: \"absolute\",\n                visibility: \"hidden\",\n                width: 0,\n                height: 0,\n                overflow: \"hidden\",\n            }}\n        >\n            {images.map((src, index) => (\n                <img key={index} src={src} alt={`preview-${index}`} />\n            ))}\n        </div>\n    );\n};\n"]}

package/dist/components/core/common/SolidImageViewer.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from "react";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+
+export interface SolidImageViewerProps {
+    images: string[];
+    open: boolean;
+    onClose: () => void;
+    viewerOptions?: Viewer.Options;
+}
+
+export const SolidImageViewer = ({
+    images,
+    open,
+    onClose,
+    viewerOptions,
+}: SolidImageViewerProps) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const viewerRef = useRef<Viewer | null>(null);
+
+    // Initialize viewer
+    useEffect(() => {
+        if (!containerRef.current || images.length === 0) return;
+
+        if (viewerRef.current) {
+            viewerRef.current.destroy();
+        }
+
+        viewerRef.current = new Viewer(containerRef.current, {
+            navbar: images.length > 1, // show navbar only if multiple
+            title: false,
+            transition: true,
+            movable: true,
+            scalable: true,
+            rotatable: true,
+            zoomable: true,
+            zIndex: 9999,
+            hidden: () => {
+                onClose();
+            },
+            toolbar: {
+                prev: 1,
+                next: 1,
+                zoomIn: 1,
+                zoomOut: 1,
+                rotateLeft: 1,
+                rotateRight: 1,
+                reset: 1,
+            },
+            ...viewerOptions,
+        });
+
+        return () => {
+            if (viewerRef.current) {
+                viewerRef.current.destroy();
+                viewerRef.current = null;
+            }
+        };
+    }, [images, open]);
+
+    // Show viewer when open becomes true
+    useEffect(() => {
+        if (open && viewerRef.current) {
+            viewerRef.current.show();
+        }
+    }, [open]);
+
+    return (
+        <div
+            ref={containerRef}
+            style={{
+                position: "absolute",
+                visibility: "hidden",
+                width: 0,
+                height: 0,
+                overflow: "hidden",
+            }}
+        >
+            {images.map((src, index) => (
+                <img key={index} src={src} alt={`preview-${index}`} />
+            ))}
+        </div>
+    );
+};

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,4CAiN1F,CAAC"}
+{"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,OAAO,0BAA0B,CAAC;AAIlC;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,4CAsN1F,CAAC"}

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.js

@@ -35,12 +35,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
 import { useResolveS3UrlMutation } from "../../../../../redux/api/fieldApi";
-import Viewer from "viewerjs";
 import "viewerjs/dist/viewer.css";
+import { SolidImageViewer } from "../../../../../components/core/common/SolidImageViewer";
+import { fetchS3Url } from "../../../../..//helpers/fetchS3Url";
 /**
  * SolidS3FileViewerWidget (PrimeReact version)
  */
@@ -63,39 +64,24 @@ export var SolidS3FileViewerWidget = function (_a) {
     var _f = useState(false), open = _f[0], setOpen = _f[1];
     var _g = useState(false), shouldShowViewer = _g[0], setShouldShowViewer = _g[1];
     var resolveS3Url = useResolveS3UrlMutation()[0];
-    var fetchS3Url = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result, e_1;
+    var resolveFileUrl = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var options, url;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    console.log("fetch url called");
                     setIsLoading(true);
-                    _a.label = 1;
+                    options = {
+                        s3Key: value,
+                        fileType: fileType,
+                        bucketName: bucketName,
+                        mediaStorageProviderUserKey: mediaStorageProviderUserKey,
+                        isPrivate: isPrivate
+                    };
+                    return [4 /*yield*/, fetchS3Url(resolveS3Url, options)];
                 case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, resolveS3Url({
-                            modelName: fieldContext.modelName,
-                            fieldName: fieldContext.fieldMetadata.name,
-                            s3Key: value,
-                            fileType: fileType,
-                            bucketName: bucketName,
-                            mediaStorageProviderUserKey: mediaStorageProviderUserKey,
-                            isPrivate: isPrivate
-                        }).unwrap()];
-                case 2:
-                    result = _a.sent();
-                    setIsLoading(false);
-                    if (result.statusCode == "200") {
-                        console.log("fetch url success", result.data.url);
-                        return [2 /*return*/, result.data.url];
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    e_1 = _a.sent();
-                    console.error("Failed to resolve S3 URL:", e_1);
+                    url = _a.sent();
                     setIsLoading(false);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
+                    return [2 /*return*/, url];
             }
         });
     }); };
@@ -106,7 +92,7 @@ export var SolidS3FileViewerWidget = function (_a) {
                 case 0:
                     if (isLoading)
                         return [2 /*return*/];
-                    return [4 /*yield*/, fetchS3Url()];
+                    return [4 /*yield*/, resolveFileUrl()];
                 case 1:
                     url = _a.sent();
                     if (!url)
@@ -129,7 +115,7 @@ export var SolidS3FileViewerWidget = function (_a) {
                     console.log("isLoading in view", isLoading);
                     if (isLoading)
                         return [2 /*return*/];
-                    return [4 /*yield*/, fetchS3Url()];
+                    return [4 /*yield*/, resolveFileUrl()];
                 case 1:
                     url = _a.sent();
                     console.log("url after fetch success", url);
@@ -151,55 +137,70 @@ export var SolidS3FileViewerWidget = function (_a) {
     var isPDF = fileType === "pdf";
     var isDownloadOnly = ["xlsx", "xls", "csv", "doc", "docx"].includes(fileType);
     // 🔹 Initialize Viewer.js once image exists
-    useEffect(function () {
-        if (imageRef.current && previewUrl && isImage) {
-            // Destroy existing viewer if any
-            if (viewerRef.current) {
-                viewerRef.current.destroy();
-            }
-            // Create new viewer instance
-            viewerRef.current = new Viewer(imageRef.current, {
-                toolbar: {
-                    zoomIn: 1,
-                    zoomOut: 1,
-                    rotateLeft: 1,
-                    rotateRight: 1,
-                    reset: 1,
-                },
-                navbar: false,
-                title: false,
-                transition: true,
-                movable: true,
-                scalable: true,
-                rotatable: true,
-                zoomable: true,
-                zIndex: 9999,
-                // Add hidden event to reset state
-                hidden: function () {
-                    setShouldShowViewer(false);
-                }
-            });
-            console.log("Viewer initialized");
-        }
-        return function () {
-            if (viewerRef.current) {
-                viewerRef.current.destroy();
-                viewerRef.current = null;
-            }
-        };
-    }, [previewUrl, isImage]);
+    // useEffect(() => {
+    //     if (imageRef.current && previewUrl && isImage) {
+    //         // Destroy existing viewer if any
+    //         if (viewerRef.current) {
+    //             viewerRef.current.destroy();
+    //         }
+    //         // Create new viewer instance
+    //         viewerRef.current = new Viewer(imageRef.current, {
+    //             toolbar: {
+    //                 zoomIn: 1,
+    //                 zoomOut: 1,
+    //                 rotateLeft: 1,
+    //                 rotateRight: 1,
+    //                 reset: 1,
+    //             },
+    //             navbar: false,
+    //             title: false,
+    //             transition: true,
+    //             movable: true,
+    //             scalable: true,
+    //             rotatable: true,
+    //             zoomable: true,
+    //             zIndex: 9999,
+    //             // Add hidden event to reset state
+    //             hidden: () => {
+    //                 setShouldShowViewer(false);
+    //             }
+    //         });
+    //         console.log("Viewer initialized");
+    //     }
+    //     return () => {
+    //         if (viewerRef.current) {
+    //             viewerRef.current.destroy();
+    //             viewerRef.current = null;
+    //         }
+    //     };
+    // }, [previewUrl, isImage]);
     // 🔹 Show viewer when shouldShowViewer becomes true
-    useEffect(function () {
-        if (shouldShowViewer && viewerRef.current) {
-            console.log("Showing viewer");
-            viewerRef.current.show();
-        }
-    }, [shouldShowViewer]);
-    return (_jsxs("div", { className: "mt-2 flex flex-col gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value ? (_jsxs("div", { className: "flex gap-3 items-center", children: [(isImage || isPDF) && (_jsx(Button, { icon: "pi pi-eye", type: "button", style: { minWidth: 66 }, loading: isLoading, tooltip: value, disabled: isLoading, label: "View ".concat(fileType), size: "small", iconPos: "left", onClick: handleView })), downloadAllowed && (_jsx(Button, { size: "small", type: "button", icon: "pi pi-download", tooltip: "Download ".concat(value === null || value === void 0 ? void 0 : value.split("/").pop()), loading: isLoading, onClick: handleDownload, disabled: isLoading, className: 'solid-icon-button' }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No file uploaded" })), isImage && previewUrl && (_jsx("img", { ref: imageRef, src: previewUrl, alt: value, style: {
-                    position: "absolute",
-                    visibility: "hidden",
-                    width: "1px",
-                    height: "1px"
+    // useEffect(() => {
+    //     if (shouldShowViewer && viewerRef.current) {
+    //         console.log("Showing viewer");
+    //         viewerRef.current.show();
+    //     }
+    // }, [shouldShowViewer]);
+    return (_jsxs("div", { className: "mt-2 flex flex-col gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value ? (_jsxs("div", { className: "flex gap-3 items-center", children: [(isImage || isPDF) && (_jsx(Button, { icon: "pi pi-eye", type: "button", style: { minWidth: 66 }, loading: isLoading, tooltip: value, disabled: isLoading, label: "View ".concat(fileType), size: "small", iconPos: "left", onClick: handleView })), downloadAllowed && (_jsx(Button, { size: "small", type: "button", icon: "pi pi-download", tooltip: "Download ".concat(value === null || value === void 0 ? void 0 : value.split("/").pop()), loading: isLoading, onClick: handleDownload, disabled: isLoading, className: 'solid-icon-button' }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No file uploaded" })), isImage && previewUrl && (
+            // <img
+            //     ref={imageRef}
+            //     src={previewUrl}
+            //     alt={value}
+            //     style={{
+            //         position: "absolute",
+            //         visibility: "hidden",
+            //         width: "1px",
+            //         height: "1px"
+            //     }}
+            // />
+            _jsx(SolidImageViewer, { images: [previewUrl], open: shouldShowViewer, onClose: function () { return setShouldShowViewer(false); }, viewerOptions: {
+                    toolbar: {
+                        zoomIn: 1,
+                        zoomOut: 1,
+                        rotateLeft: 1,
+                        rotateRight: 1,
+                        reset: 1,
+                    },
                 } })), _jsx(Dialog, { header: value, visible: open, modal: true, style: { width: "80vw", maxHeight: "90vh" }, onHide: function () { return setOpen(false); }, headerClassName: 'p-1 form-wrapper-title', contentClassName: 'p-0', contentStyle: { borderRadius: 6 }, children: previewUrl && isPDF && (_jsx("div", { style: {
                         width: "100%",
                         height: "75vh",

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidS3FileViewerWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAC1D,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxD,IAAM,QAAQ,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,QAAQ,0CAAE,WAAW,EAAE,CAAC;IAC/D,IAAM,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,eAAe,KAAK,KAAK,CAAC;IACxE,IAAM,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC;IACpD,IAAM,2BAA2B,GAAG,eAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;IACtF,IAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAE9F,IAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,IAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAExC,IAAA,KAA8B,QAAQ,CAAS,EAAE,CAAC,EAAjD,UAAU,QAAA,EAAE,aAAa,QAAwB,CAAC;IACnD,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAC5C,IAAA,KAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAC;IAClC,IAAA,KAA0C,QAAQ,CAAC,KAAK,CAAC,EAAxD,gBAAgB,QAAA,EAAE,mBAAmB,QAAmB,CAAC;IAEzD,IAAA,YAAY,GAAI,uBAAuB,EAAE,GAA7B,CAA8B;IAEjD,IAAM,UAAU,GAAG;;;;;oBACf,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;oBAChC,YAAY,CAAC,IAAI,CAAC,CAAC;;;;oBAEA,qBAAM,YAAY,CAAC;4BAC9B,SAAS,EAAE,YAAY,CAAC,SAAS;4BACjC,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,IAAI;4BAC1C,KAAK,EAAE,KAAK;4BACZ,QAAQ,EAAE,QAAQ;4BAClB,UAAU,EAAE,UAAU;4BACtB,2BAA2B,EAAE,2BAA2B;4BACxD,SAAS,EAAE,SAAS;yBACvB,CAAC,CAAC,MAAM,EAAE,EAAA;;oBARL,MAAM,GAAG,SAQJ;oBAEX,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,IAAI,MAAM,CAAC,UAAU,IAAI,KAAK,EAAE;wBAC5B,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;wBAClD,sBAAO,MAAM,CAAC,IAAI,CAAC,GAAG,EAAC;qBAC1B;;;;oBAED,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,GAAC,CAAC,CAAC;oBAC9C,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,sBAAO,IAAI,EAAC;;;;SAEnB,CAAC;IAEF,IAAM,cAAc,GAAG;;;;;oBACnB,IAAI,SAAS;wBAAE,sBAAO;oBACV,qBAAM,UAAU,EAAE,EAAA;;oBAAxB,GAAG,GAAG,SAAkB;oBAC9B,IAAI,CAAC,GAAG;wBAAE,sBAAO;oBACX,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;oBACtC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC;oBACb,CAAC,CAAC,QAAQ,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAI,MAAM,CAAC;oBAC/C,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAC;oBACpB,CAAC,CAAC,GAAG,GAAG,qBAAqB,CAAC;oBAC9B,CAAC,CAAC,KAAK,EAAE,CAAC;;;;SACb,CAAC;IAEF,IAAM,UAAU,GAAG;;;;;oBACf,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;oBAC5C,IAAI,SAAS;wBAAE,sBAAO;oBAEV,qBAAM,UAAU,EAAE,EAAA;;oBAAxB,GAAG,GAAG,SAAkB;oBAC9B,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC;oBAC5C,IAAI,CAAC,GAAG;wBAAE,sBAAO;oBAEjB,aAAa,CAAC,GAAG,CAAC,CAAC;oBAEnB,IAAI,OAAO,EAAE;wBACT,4CAA4C;wBAC5C,mBAAmB,CAAC,IAAI,CAAC,CAAC;qBAC7B;yBAAM;wBACH,OAAO,CAAC,IAAI,CAAC,CAAC;qBACjB;;;;SACJ,CAAC;IAEF,IAAM,OAAO,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACzE,IAAM,KAAK,GAAG,QAAQ,KAAK,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEhF,4CAA4C;IAC5C,SAAS,CAAC;QACN,IAAI,QAAQ,CAAC,OAAO,IAAI,UAAU,IAAI,OAAO,EAAE;YAC3C,iCAAiC;YACjC,IAAI,SAAS,CAAC,OAAO,EAAE;gBACnB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;aAC/B;YAED,6BAA6B;YAC7B,SAAS,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE;gBAC7C,OAAO,EAAE;oBACL,MAAM,EAAE,CAAC;oBACT,OAAO,EAAE,CAAC;oBACV,UAAU,EAAE,CAAC;oBACb,WAAW,EAAE,CAAC;oBACd,KAAK,EAAE,CAAC;iBACX;gBACD,MAAM,EAAE,KAAK;gBACb,KAAK,EAAE,KAAK;gBACZ,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAC,IAAI;gBACX,kCAAkC;gBAClC,MAAM,EAAE;oBACJ,mBAAmB,CAAC,KAAK,CAAC,CAAC;gBAC/B,CAAC;aACJ,CAAC,CAAC;YAEH,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;SACrC;QAED,OAAO;YACH,IAAI,SAAS,CAAC,OAAO,EAAE;gBACnB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC5B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;aAC5B;QACL,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,oDAAoD;IACpD,SAAS,CAAC;QACN,IAAI,gBAAgB,IAAI,SAAS,CAAC,OAAO,EAAE;YACvC,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;YAC9B,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SAC5B;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACH,eAAK,SAAS,EAAC,0BAA0B,aACrC,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAE/D,KAAK,CAAC,CAAC,CAAC,CACL,eAAK,SAAS,EAAC,yBAAyB,aACnC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CACnB,KAAC,MAAM,IACH,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EACvB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,eAAQ,QAAQ,CAAE,EACzB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,UAAU,GACrB,CACL,EACA,eAAe,IAAI,CAChB,KAAC,MAAM,IACH,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,mBAAY,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAE,EAC9C,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAC,mBAAmB,GAAG,CACvC,IACC,CACT,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAC,+BAA+B,iCAAqB,CACpE,EAGA,OAAO,IAAI,UAAU,IAAI,CACtB,cACI,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,UAAU,EACf,GAAG,EAAE,KAAK,EACV,KAAK,EAAE;oBACH,QAAQ,EAAE,UAAU;oBACpB,UAAU,EAAE,QAAQ;oBACpB,KAAK,EAAE,KAAK;oBACZ,MAAM,EAAE,KAAK;iBAChB,GACH,CACL,EAED,KAAC,MAAM,IACH,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,IAAI,EACb,KAAK,QACL,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAC3C,MAAM,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAC5B,eAAe,EAAC,wBAAwB,EACxC,gBAAgB,EAAC,KAAK,EACtB,YAAY,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAEhC,UAAU,IAAI,KAAK,IAAI,CACpB,cACI,KAAK,EAAE;wBACH,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,QAAQ,EAAE,QAAQ;qBACrB,YAED,iBACI,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAC1D,GACA,CACT,GACI,IACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["\nimport { useEffect, useRef, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { Button } from \"primereact/button\";\nimport { Dialog } from \"primereact/dialog\";\nimport { useResolveS3UrlMutation } from \"../../../../../redux/api/fieldApi\";\nimport Viewer from \"viewerjs\";\nimport \"viewerjs/dist/viewer.css\";\n\n/**\n * SolidS3FileViewerWidget (PrimeReact version)\n */\nexport const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();\n    const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;\n    const bucketName = fieldLayoutInfo.attrs.bucketName;\n    const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;\n    const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : \"false\";\n\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const viewerRef = useRef<Viewer | null>(null);\n\n    const [previewUrl, setPreviewUrl] = useState<string>(\"\");\n    const [isLoading, setIsLoading] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [shouldShowViewer, setShouldShowViewer] = useState(false);\n\n    const [resolveS3Url] = useResolveS3UrlMutation();\n\n    const fetchS3Url = async () => {\n        console.log(\"fetch url called\");\n        setIsLoading(true);\n        try {\n            const result = await resolveS3Url({\n                modelName: fieldContext.modelName,\n                fieldName: fieldContext.fieldMetadata.name,\n                s3Key: value,\n                fileType: fileType,\n                bucketName: bucketName,\n                mediaStorageProviderUserKey: mediaStorageProviderUserKey,\n                isPrivate: isPrivate\n            }).unwrap();\n\n            setIsLoading(false);\n            if (result.statusCode == \"200\") {\n                console.log(\"fetch url success\", result.data.url);\n                return result.data.url;\n            }\n        } catch (e) {\n            console.error(\"Failed to resolve S3 URL:\", e);\n            setIsLoading(false);\n            return null;\n        }\n    };\n\n    const handleDownload = async () => {\n        if (isLoading) return;\n        const url = await fetchS3Url();\n        if (!url) return;\n        const a = document.createElement(\"a\");\n        a.href = url;\n        a.download = value?.split(\"/\").pop() || \"file\";\n        a.target = \"_blank\";\n        a.rel = \"noopener noreferrer\";\n        a.click();\n    };\n\n    const handleView = async () => {\n        console.log(\"isLoading in view\", isLoading);\n        if (isLoading) return;\n        \n        const url = await fetchS3Url();\n        console.log(\"url after fetch success\", url);\n        if (!url) return;\n        \n        setPreviewUrl(url);\n        \n        if (isImage) {\n            // Trigger viewer to show after state update\n            setShouldShowViewer(true);\n        } else {\n            setOpen(true);\n        }\n    };\n\n    const isImage = [\"jpeg\", \"jpg\", \"png\", \"gif\", \"webp\"].includes(fileType);\n    const isPDF = fileType === \"pdf\";\n    const isDownloadOnly = [\"xlsx\", \"xls\", \"csv\", \"doc\", \"docx\"].includes(fileType);\n\n    // 🔹 Initialize Viewer.js once image exists\n    useEffect(() => {\n        if (imageRef.current && previewUrl && isImage) {\n            // Destroy existing viewer if any\n            if (viewerRef.current) {\n                viewerRef.current.destroy();\n            }\n\n            // Create new viewer instance\n            viewerRef.current = new Viewer(imageRef.current, {\n                toolbar: {\n                    zoomIn: 1,\n                    zoomOut: 1,\n                    rotateLeft: 1,\n                    rotateRight: 1,\n                    reset: 1,\n                },\n                navbar: false,\n                title: false,\n                transition: true,\n                movable: true,\n                scalable: true,\n                rotatable: true,\n                zoomable: true,\n                zIndex:9999,\n                // Add hidden event to reset state\n                hidden: () => {\n                    setShouldShowViewer(false);\n                }\n            });\n\n            console.log(\"Viewer initialized\");\n        }\n\n        return () => {\n            if (viewerRef.current) {\n                viewerRef.current.destroy();\n                viewerRef.current = null;\n            }\n        };\n    }, [previewUrl, isImage]);\n\n    // 🔹 Show viewer when shouldShowViewer becomes true\n    useEffect(() => {\n        if (shouldShowViewer && viewerRef.current) {\n            console.log(\"Showing viewer\");\n            viewerRef.current.show();\n        }\n    }, [shouldShowViewer]);\n\n    return (\n        <div className=\"mt-2 flex flex-col gap-2\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n\n            {value ? (\n                <div className=\"flex gap-3 items-center\">\n                    {(isImage || isPDF) && (\n                        <Button\n                            icon=\"pi pi-eye\"\n                            type=\"button\"\n                            style={{ minWidth: 66 }}\n                            loading={isLoading}\n                            tooltip={value}\n                            disabled={isLoading}\n                            label={`View ${fileType}`}\n                            size=\"small\"\n                            iconPos=\"left\"\n                            onClick={handleView}\n                        />\n                    )}\n                    {downloadAllowed && (\n                        <Button\n                            size=\"small\"\n                            type=\"button\"\n                            icon=\"pi pi-download\"\n                            tooltip={`Download ${value?.split(\"/\").pop()}`}\n                            loading={isLoading}\n                            onClick={handleDownload}\n                            disabled={isLoading}\n                            className='solid-icon-button' />\n                    )}\n                </div>\n            ) : (\n                <p className=\"text-sm text-muted-foreground\">No file uploaded</p>\n            )}\n\n            {/* Hidden image for Viewer.js - keep visibility hidden instead of display none */}\n            {isImage && previewUrl && (\n                <img\n                    ref={imageRef}\n                    src={previewUrl}\n                    alt={value}\n                    style={{ \n                        position: \"absolute\",\n                        visibility: \"hidden\",\n                        width: \"1px\",\n                        height: \"1px\"\n                    }}\n                />\n            )}\n\n            <Dialog\n                header={value}\n                visible={open}\n                modal\n                style={{ width: \"80vw\", maxHeight: \"90vh\" }}\n                onHide={() => setOpen(false)}\n                headerClassName='p-1 form-wrapper-title'\n                contentClassName='p-0'\n                contentStyle={{ borderRadius: 6 }}\n            >\n                {previewUrl && isPDF && (\n                    <div\n                        style={{\n                            width: \"100%\",\n                            height: \"75vh\",\n                            overflow: \"hidden\",\n                        }}\n                    >\n                        <iframe\n                            src={previewUrl}\n                            style={{ width: \"100%\", height: \"100%\", border: \"none\" }}\n                        />\n                    </div>\n                )}\n            </Dialog>\n        </div>\n    );\n};"]}
+{"version":3,"file":"SolidS3FileViewerWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useRef, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { Button } from \"primereact/button\";\nimport { Dialog } from \"primereact/dialog\";\nimport { useResolveS3UrlMutation } from \"../../../../../redux/api/fieldApi\";\nimport Viewer from \"viewerjs\";\nimport \"viewerjs/dist/viewer.css\";\nimport { SolidImageViewer } from \"../../../../../components/core/common/SolidImageViewer\";\nimport { fetchS3Url, type FetchS3UrlOptions } from \"../../../../..//helpers/fetchS3Url\";\n\n/**\n * SolidS3FileViewerWidget (PrimeReact version)\n */\nexport const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();\n    const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;\n    const bucketName = fieldLayoutInfo.attrs.bucketName;\n    const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;\n    const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : \"false\";\n\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const viewerRef = useRef<Viewer | null>(null);\n\n    const [previewUrl, setPreviewUrl] = useState<string>(\"\");\n    const [isLoading, setIsLoading] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [shouldShowViewer, setShouldShowViewer] = useState(false);\n\n    const [resolveS3Url] = useResolveS3UrlMutation();\n\n    const resolveFileUrl = async () => {\n        setIsLoading(true);\n\n        const options: FetchS3UrlOptions = {\n            s3Key: value,\n            fileType: fileType,\n            bucketName: bucketName,\n            mediaStorageProviderUserKey: mediaStorageProviderUserKey,\n            isPrivate: isPrivate\n        };\n\n        const url = await fetchS3Url(resolveS3Url, options);\n        setIsLoading(false);\n        return url;\n    };\n\n    const handleDownload = async () => {\n        if (isLoading) return;\n        const url = await resolveFileUrl();\n        if (!url) return;\n        const a = document.createElement(\"a\");\n        a.href = url;\n        a.download = value?.split(\"/\").pop() || \"file\";\n        a.target = \"_blank\";\n        a.rel = \"noopener noreferrer\";\n        a.click();\n    };\n\n    const handleView = async () => {\n        console.log(\"isLoading in view\", isLoading);\n        if (isLoading) return;\n\n        const url = await resolveFileUrl();\n        console.log(\"url after fetch success\", url);\n        if (!url) return;\n\n        setPreviewUrl(url);\n\n        if (isImage) {\n            // Trigger viewer to show after state update\n            setShouldShowViewer(true);\n        } else {\n            setOpen(true);\n        }\n    };\n\n    const isImage = [\"jpeg\", \"jpg\", \"png\", \"gif\", \"webp\"].includes(fileType);\n    const isPDF = fileType === \"pdf\";\n    const isDownloadOnly = [\"xlsx\", \"xls\", \"csv\", \"doc\", \"docx\"].includes(fileType);\n\n    // 🔹 Initialize Viewer.js once image exists\n    // useEffect(() => {\n    //     if (imageRef.current && previewUrl && isImage) {\n    //         // Destroy existing viewer if any\n    //         if (viewerRef.current) {\n    //             viewerRef.current.destroy();\n    //         }\n\n    //         // Create new viewer instance\n    //         viewerRef.current = new Viewer(imageRef.current, {\n    //             toolbar: {\n    //                 zoomIn: 1,\n    //                 zoomOut: 1,\n    //                 rotateLeft: 1,\n    //                 rotateRight: 1,\n    //                 reset: 1,\n    //             },\n    //             navbar: false,\n    //             title: false,\n    //             transition: true,\n    //             movable: true,\n    //             scalable: true,\n    //             rotatable: true,\n    //             zoomable: true,\n    //             zIndex: 9999,\n    //             // Add hidden event to reset state\n    //             hidden: () => {\n    //                 setShouldShowViewer(false);\n    //             }\n    //         });\n\n    //         console.log(\"Viewer initialized\");\n    //     }\n\n    //     return () => {\n    //         if (viewerRef.current) {\n    //             viewerRef.current.destroy();\n    //             viewerRef.current = null;\n    //         }\n    //     };\n    // }, [previewUrl, isImage]);\n\n    // 🔹 Show viewer when shouldShowViewer becomes true\n    // useEffect(() => {\n    //     if (shouldShowViewer && viewerRef.current) {\n    //         console.log(\"Showing viewer\");\n    //         viewerRef.current.show();\n    //     }\n    // }, [shouldShowViewer]);\n\n    return (\n        <div className=\"mt-2 flex flex-col gap-2\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n\n            {value ? (\n                <div className=\"flex gap-3 items-center\">\n                    {(isImage || isPDF) && (\n                        <Button\n                            icon=\"pi pi-eye\"\n                            type=\"button\"\n                            style={{ minWidth: 66 }}\n                            loading={isLoading}\n                            tooltip={value}\n                            disabled={isLoading}\n                            label={`View ${fileType}`}\n                            size=\"small\"\n                            iconPos=\"left\"\n                            onClick={handleView}\n                        />\n                    )}\n                    {downloadAllowed && (\n                        <Button\n                            size=\"small\"\n                            type=\"button\"\n                            icon=\"pi pi-download\"\n                            tooltip={`Download ${value?.split(\"/\").pop()}`}\n                            loading={isLoading}\n                            onClick={handleDownload}\n                            disabled={isLoading}\n                            className='solid-icon-button' />\n                    )}\n                </div>\n            ) : (\n                <p className=\"text-sm text-muted-foreground\">No file uploaded</p>\n            )}\n\n            {/* Hidden image for Viewer.js - keep visibility hidden instead of display none */}\n            {isImage && previewUrl && (\n                // <img\n                //     ref={imageRef}\n                //     src={previewUrl}\n                //     alt={value}\n                //     style={{\n                //         position: \"absolute\",\n                //         visibility: \"hidden\",\n                //         width: \"1px\",\n                //         height: \"1px\"\n                //     }}\n                // />\n                <SolidImageViewer\n                    images={[previewUrl]}\n                    open={shouldShowViewer}\n                    onClose={() => setShouldShowViewer(false)}\n                    viewerOptions={{\n                        toolbar: {\n                            zoomIn: 1,\n                            zoomOut: 1,\n                            rotateLeft: 1,\n                            rotateRight: 1,\n                            reset: 1,\n                        },\n                    }}\n                />\n\n            )}\n\n            <Dialog\n                header={value}\n                visible={open}\n                modal\n                style={{ width: \"80vw\", maxHeight: \"90vh\" }}\n                onHide={() => setOpen(false)}\n                headerClassName='p-1 form-wrapper-title'\n                contentClassName='p-0'\n                contentStyle={{ borderRadius: 6 }}\n            >\n                {previewUrl && isPDF && (\n                    <div\n                        style={{\n                            width: \"100%\",\n                            height: \"75vh\",\n                            overflow: \"hidden\",\n                        }}\n                    >\n                        <iframe\n                            src={previewUrl}\n                            style={{ width: \"100%\", height: \"100%\", border: \"none\" }}\n                        />\n                    </div>\n                )}\n            </Dialog>\n        </div>\n    );\n};\n"]}