@solidxai/core-ui 0.1.2 → 0.1.4-beta.0

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

@@ -6,7 +6,7 @@ import { Divider } from "primereact/divider";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
 import { useSearchParams } from "../../../hooks/useSearchParams";
-import { queryStringToQueryObject } from "../list/SolidListView";
+import { getFilterObjectFromLocalStorage } from "../list/SolidListView";
 import { InputText } from "primereact/inputtext";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import qs from "qs";
@@ -14,6 +14,8 @@ import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
 import { useSession } from '../../../hooks/useSession'
+import GroupingComponent, { AggregationRule, GroupingRule, DateGroupingFormat } from "./GroupingComponent";
+
 
 const getRandomInt = (min: number, max: number) => {
     return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -25,6 +27,24 @@ interface PredefinedSearch {
     filters: Record<string, any>;
 }
 
+export type SearchableField = {
+    fieldName: string;
+    displayName: string;
+    searchField: string;
+    matchMode: string;
+}
+
+export type GroupableField = {
+    fieldName: string;
+    displayName: string;
+    searchField: string;
+    matchMode: string;
+    type: string;
+    ormType: string;
+    relationType: string;
+    computedFieldValueType: string;
+}
+
 const extractFields = (nodes: any[] = []): any[] => {
     const result: any[] = [];
 
@@ -354,7 +374,7 @@ export const mergeSearchAndCustomFilters = (transformedFilter: any, newFilter: a
 }
 
 
-export const mergeAllDiffFilters = (customFilter: any, searchFilter: any, savedFilter: any, preDefinedFilter?: any) => {
+export const mergeAllDiffFilters = (customFilter: any, searchFilter: any, savedFilter: any, preDefinedFilter?: any, groupingRules?: GroupingRule[], aggregationRules?: AggregationRule[]) => {
     const filters: any = {};
 
     // Add only non-null filters
@@ -370,6 +390,12 @@ export const mergeAllDiffFilters = (customFilter: any, searchFilter: any, savedF
     if (preDefinedFilter && Object.keys(preDefinedFilter).length > 0) {
         filters["predefined_search_predicate"] = preDefinedFilter;
     }
+    if (groupingRules && Object.keys(groupingRules).length > 0) {
+        filters["grouping_rules"] = groupingRules;
+    }
+    if (aggregationRules && Object.keys(aggregationRules).length > 0) {
+        filters["aggregation_rules"] = aggregationRules;
+    }
     // Return the combined filters object
     return filters;
 }
@@ -378,8 +404,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,11 +454,64 @@ 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 }>;
 
 
 
-export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates }: any, ref) => {
+export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates }: any, ref) => {
     const defaultState: FilterRule[] = [
         {
             id: 1,
@@ -455,6 +540,20 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
             ]
         }
     ];
+
+    const defaultAggregationRules: AggregationRule[] = [
+        {
+            id: 1,
+            operator: "count",
+            fieldName: "id",
+            locked: true
+        }
+    ];
+
+    const defaultGroupingRules: GroupingRule[] = [
+        { id: 1, fieldName: null, dateGrouping: null }
+    ];
+
     const [initialState, setInitialState] = useState(defaultState);
     const pathname = usePathname();
 
@@ -473,6 +572,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
 
     const [fields, setFields] = useState<any[]>([]);
     const [searchableFields, setSearchableFields] = useState<any[]>([]);
+    const [groupableFields, setGroupableFields] = useState<GroupableField[]>([]);
+
+    const [groupingRules, setGroupingRules] = useState<GroupingRule[]>(defaultGroupingRules);
+    const [aggregationRules, setAggregationRules] = useState<AggregationRule[]>(defaultAggregationRules);
 
     // used to show the list of predefined searches 
     const [predefinedSearches, setPredefinedSearches] = useState<PredefinedSearch[]>([]);
@@ -480,6 +583,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
     // used to open / close the custom fitler popup 
     const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
 
+    // used to open / close the group fitler popup 
+    const [showGroupFilterElement, setShowGroupFilterElement] = useState<boolean>(false);
+
+
     // searchChips maintain the ui to display searched query 
     // searchFilter maintain the transformed filter of the  searched query 
     const [searchChips, setSearchChips] = useState<{ columnName?: string; value: string }[]>([]);
@@ -613,7 +720,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
 
                 if (activeSavedFilter && savedFilters.length === 0) return;
 
-                const queryObject = queryStringToQueryObject();
+                const queryObject = getFilterObjectFromLocalStorage();
                 // const savedQuery = parsedSearchParams?.get("savedQuery");
                 if (activeSavedFilter) {
                     const currentSavedFilterId = Number(activeSavedFilter);
@@ -638,16 +745,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);
 
                 }
@@ -657,6 +767,31 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                     const hydratedRules = await hydrateRelationRules([rules], viewData);
                     setFilterRules(hydratedRules);
                 }
+                const hasGroupingRules = (queryObject?.grouping_rules?.some((rule: any) => rule.fieldName !== null));
+
+                if (hasGroupingRules) {
+                    setGroupingRules(queryObject?.grouping_rules);
+                } else {
+                    // If no grouping rules in localStorage check layout
+                    const layoutGroupBy = viewData?.data?.solidView?.layout?.attrs?.groupBy;
+
+                    if (Array.isArray(layoutGroupBy) && layoutGroupBy.length > 0) {
+                        const initialGroupingRules: GroupingRule[] = layoutGroupBy.map((groupStr: string, index: number) => {
+                            const [fieldName, dateGrouping] = groupStr.split(":");
+                            return {
+                                id: Date.now() + index,
+                                fieldName: fieldName || null,
+                                dateGrouping: (dateGrouping as DateGroupingFormat) || null
+                            };
+                        });
+                        setGroupingRules(initialGroupingRules);
+                    }
+                }
+
+                if (queryObject?.aggregation_rules && queryObject?.aggregation_rules !== aggregationRules) {
+                    setAggregationRules(queryObject?.aggregation_rules);
+                }
+
 
                 setRefreshKey((prev) => prev + 1)
                 setHasSearched(true);
@@ -680,17 +815,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);
+
                 }
             }
         }
@@ -728,6 +866,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                     matchMode: viewFieldElement?.attrs?.searchMatchMode,
                     searchField: viewFieldElement?.attrs?.searchField ?? null,
                     isSearchable: viewFieldElement?.attrs?.isSearchable ?? false,
+                    relationType: value?.relationType ?? null,
                 };
             });
 
@@ -753,8 +892,30 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 }
             });
 
-            // console.log("searchableFieldsList", searchableFieldsList);
-
+            const groupableFieldsList = fieldsList.filter((field: any) => {
+                switch (field.type) {
+                    case "relation":
+                        // Only include relation if searchField is present
+                        if (field.relationType === "many-to-one")
+                            return true;
+                        return false;
+                    case "longText":
+                    case "shortText":
+                    case "selectionStatic":
+                    case "selectionDynamic":
+                    case "int":
+                    case "float":
+                    case "boolean":
+                    case "date":
+                    case "datetime":
+                        return true;
+                    // case "selectionStatic":
+                    case "computed":
+                        return field.ormType === "varchar";
+                    default:
+                        return false;
+                }
+            });
 
             // Optionally map to a minimal structure if needed for UI
             let finalSearchableFieldsList: any = searchableFieldsList.map((field: any) => ({
@@ -764,10 +925,21 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 matchMode: field.matchMode
             }));
 
-            // console.log("finalSearchableFieldsList", finalSearchableFieldsList);
-
             setSearchableFields(finalSearchableFieldsList);
 
+            let finalGroupableFieldsList: any = groupableFieldsList.map((field: any) => ({
+                fieldName: field.value,
+                displayName: field.name,
+                searchField: field.searchField ?? "",
+                matchMode: field.matchMode,
+                type: field.type,
+                ormType: field.ormType,
+                relationType: field.relationType,
+                computedFieldValueType: field.computedFieldValueType
+            }));
+
+            setGroupableFields(finalGroupableFieldsList)
+
             const predefinedSearchesList = viewData?.data?.solidView?.layout?.attrs?.predefinedSearches || [];
             setPredefinedSearches(predefinedSearchesList);
         }
@@ -859,10 +1031,16 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
 
     }
 
+    const applyGrouping = (groupingRules: GroupingRule[], aggregationRules: AggregationRule[]) => {
+        setHasSearched(true)
+        setShowGroupFilterElement(false);
+        setGroupingRules(groupingRules);
+        setAggregationRules(aggregationRules);
+        setRefreshKey((prev) => prev + 1)
+    }
+
     useEffect(() => {
         if (refreshKey > 0 && hasSearched) {
-            console.log("refres", refreshKey);
-            console.log("hasSearched", hasSearched);
 
             const formattedChips = {
                 $and: searchChips.map((chip: any) => ({
@@ -881,7 +1059,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
             const finalPredefinedFilter = predefinedSearchBaseFilter
 
             const finalCustomFilter = customFilter
-            const finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter)
+            const finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter, groupingRules, aggregationRules)
             handleApplyCustomFilter(finalFilter, true);
             setHasSearched(false)
             // }
@@ -943,8 +1121,8 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         } else {
             console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
         }
-
     }
+
     const deleteSavedFilter = async () => {
         // delte the saved filter with id 
         await deleteEntity(savedFilterTobeDeleted);
@@ -1107,7 +1285,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         }
     }
 
-
     const SavedFiltersChip = () => {
 
         return (
@@ -1149,6 +1326,40 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         )
     };
 
+    const removeGrouping = () => {
+        setGroupingRules(defaultGroupingRules);
+        setAggregationRules(defaultAggregationRules);
+        setHasSearched(true);
+        setRefreshKey((prev) => prev + 1)
+    }
+
+    const GroupingChip = () => {
+        return (
+            <li className="solid-global-search-chip">
+                <div className="flex align-items-center gap-2">
+                    <div className="flex align-items-center gap-2">
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
+
+                            onClick={() => setShowGroupFilterElement(true)}
+                        >
+                            <rect width="20" height="20" rx="4" fill="#722ED1" />
+                            <path d="M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z"
+                                fill="white" />
+                        </svg>
+                        <span><strong>{groupingRules.length}</strong> Grouping rules applied</span>
+                    </div>
+
+                    {/* button to clear filter */}
+                    <a onClick={removeGrouping}
+                        style={{ cursor: "pointer" }}
+                    >
+                        <i className="pi pi-times ml-1">
+                        </i></a>
+                </div>
+            </li>
+        )
+    };
+
 
 
 
@@ -1249,7 +1460,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         }
 
         try {
-            // Replace {{search}} placeholders with actual search value
+            // Replace {{ search }} placeholders with actual search value
             const processedFilter = replacePlaceholders(predefinedSearch.filters, inputValue.trim());
 
             // Clear all existing filters and searches
@@ -1320,6 +1531,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                         {currentSavedFilterData && <SavedFiltersChip />}
                         {predefinedSearchChip && <PredefinedSearchChip />}
                         {customFilter && <CustomChip />}
+                        {groupingRules.length > 0 && groupingRules.some(r => r.fieldName !== null) && <GroupingChip />}
                         <SearchChip />
                         <li ref={chipsRef}>
                             <div className="relative solid-global-search-element-wrapper">
@@ -1446,8 +1658,11 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                                 <Divider className="m-0" />
                             </>
                         }
-                        <div className="px-2 py-1">
+                        <div className="px-2 py-1 flex justify-content-between">
                             <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} className="font-bold" />
+                            {viewType === "tree" &&
+                                <Button text size="small" label="Grouping" iconPos="left" icon='pi pi-plus' onClick={() => setShowGroupFilterElement(true)} className="font-bold" />
+                            }
                         </div>
                     </div>
                 )
@@ -1458,19 +1673,40 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                         <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setShowGlobalSearchElement(false)} />
                     </div>
                     <Divider className="m-0" />
-                    <div className="p-3 lg:p-4">
+                    <div className="p-2 lg:p-2">
                         {fields.length > 0 &&
                             <FilterComponent viewData={viewData} fields={fields} filterRules={filterRules} setFilterRules={setFilterRules} transformFilterRules={transformCustomFilterRules} closeDialog={() => setShowGlobalSearchElement(false)}></FilterComponent>
                         }
                     </div>
                 </Dialog>
+                <Dialog header={false} className="solid-global-search-filter" showHeader={false} visible={showGroupFilterElement} style={{ width: '20vw' }} breakpoints={{ '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }} onHide={() => { if (!showGroupFilterElement) return; setShowGroupFilterElement(false); }}>
+                    <div className="flex align-items-center justify-content-between px-3">
+                        <h5 className="solid-custom-title m-0"></h5>
+                        <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setShowGroupFilterElement(false)} />
+                    </div>
+                    <Divider className="m-0" />
+                    <div className="p-2 lg:p-2">
+                        {groupableFields.length > 0 &&
+                            <GroupingComponent
+                                viewData={viewData}
+                                fields={groupableFields}
+                                groupingRules={groupingRules}
+                                setGroupingRules={setGroupingRules}
+                                aggregationRules={aggregationRules}
+                                setAggregationRules={setAggregationRules}
+                                applyGrouping={applyGrouping}
+                                closeDialog={() => setShowGroupFilterElement(false)}
+                            ></GroupingComponent>
+                        }
+                    </div>
+                </Dialog >
                 <Dialog header={false} className="solid-global-search-filter" showHeader={false} visible={showSavedFilterComponent} style={{ width: '65vw' }} breakpoints={{ '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }} onHide={() => { if (!showSavedFilterComponent) return; setShowSavedFilterComponent(false); }}>
                     <div className="flex align-items-center justify-content-between px-3">
                         <h5 className="solid-custom-title m-0">Saved Filter</h5>
                         <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setShowSavedFilterComponent(false)} />
                     </div>
                     <Divider className="m-0" />
-                    <div className="p-3 lg:p-4">
+                    <div className="p-2 lg:p-2">
                         {fields.length > 0 &&
                             <FilterComponent viewData={viewData} fields={fields} filterRules={currentSavedFilterRules} setFilterRules={setCurrentSavedFilterRules} transformFilterRules={transformSavedFilterRules} closeDialog={() => setShowSavedFilterComponent(false)}></FilterComponent>
                         }
@@ -1495,7 +1731,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 >
                     <p>Are you sure you want to delete the {currentSavedFilterData?.name} saved query?</p>
                 </Dialog>
-            </div>
+            </div >
             {/* <div>
                 <Button
                     icon="pi pi-save"

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"]}