@solidstarters/solid-core-ui 1.1.206 → 1.1.208

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

@@ -61,7 +61,7 @@ import { Dialog } from "primereact/dialog";
 import FilterComponent, { FilterOperator, FilterRuleType } from "../../../components/core/common/FilterComponent";
 import { Button } from "primereact/button";
 import { Divider } from "primereact/divider";
-import { useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { queryStringToQueryObject } from "../list/SolidListView";
 import { InputText } from "primereact/inputtext";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
@@ -69,11 +69,29 @@ import qs from "qs";
 import { useSelector } from "react-redux";
 import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
 var getRandomInt = function (min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 };
+var extractFields = function (nodes) {
+    if (nodes === void 0) { nodes = []; }
+    var result = [];
+    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+        var node = nodes_1[_i];
+        if ((node === null || node === void 0 ? void 0 : node.type) === "field") {
+            result.push(node);
+        }
+        if (Array.isArray(node === null || node === void 0 ? void 0 : node.children)) {
+            result.push.apply(result, extractFields(node.children));
+        }
+    }
+    return result;
+};
 var transformFiltersToRules = function (filter, parentRule) {
     if (parentRule === void 0) { parentRule = null; }
+    if (!filter || typeof filter !== "object" || Object.keys(filter).length === 0) {
+        throw new Error("Invalid filter: expected a non-null object with properties");
+    }
     if (!filter || typeof filter !== "object") {
         throw new Error("Invalid filter: expected a non-null object");
     }
@@ -85,7 +103,16 @@ var transformFiltersToRules = function (filter, parentRule) {
             matchOperator: FilterOperator.OR,
             parentRule: parentRule,
             children: filter["$or"]
-                .filter(function (sub) { return sub != null; }) // skip nulls
+                .filter(function (sub) {
+                // Filter out null, undefined, empty strings, and empty objects
+                if (sub == null)
+                    return false;
+                if (typeof sub === "string" && sub.trim() === "")
+                    return false;
+                if (typeof sub === "object" && Object.keys(sub).length === 0)
+                    return false;
+                return true;
+            })
                 .map(function (subFilter) { return transformFiltersToRules(subFilter, currentId); })
         };
     }
@@ -96,24 +123,51 @@ var transformFiltersToRules = function (filter, parentRule) {
             matchOperator: FilterOperator.AND,
             parentRule: parentRule,
             children: filter["$and"]
-                .filter(function (sub) { return sub != null; })
+                .filter(function (sub) {
+                // Filter out null, undefined, empty strings, and empty objects
+                if (sub == null)
+                    return false;
+                if (typeof sub === "string" && sub.trim() === "")
+                    return false;
+                if (typeof sub === "object" && Object.keys(sub).length === 0)
+                    return false;
+                return true;
+            })
                 .map(function (subFilter) { return transformFiltersToRules(subFilter, currentId); })
         };
     }
     // Handle single rule condition
-    for (var key in filter) {
-        var condition = filter[key];
+    for (var fieldName in filter) {
+        var condition = filter[fieldName];
         if (!condition || typeof condition !== "object") {
-            throw new Error("Invalid condition for field '".concat(key, "'"));
+            throw new Error("Invalid condition for field '".concat(fieldName, "'"));
+        }
+        // CASE 1: relation filter → unwrap first
+        if ((condition === null || condition === void 0 ? void 0 : condition.id) && typeof (condition === null || condition === void 0 ? void 0 : condition.id) === "object") {
+            for (var matchMode in condition.id) {
+                var rawValue = condition.id[matchMode];
+                var mathcModeValue = matchMode;
+                return {
+                    id: currentId,
+                    type: FilterRuleType.RULE,
+                    fieldName: fieldName,
+                    matchMode: mathcModeValue,
+                    value: Array.isArray(rawValue) ? rawValue : [rawValue],
+                    parentRule: parentRule,
+                    children: []
+                };
+            }
         }
+        // CASE 2: normal field → loop stays
         for (var matchMode in condition) {
+            var rawValue = condition[matchMode];
+            var mathcModeValue = matchMode;
             return {
                 id: currentId,
                 type: FilterRuleType.RULE,
-                fieldName: key,
-                //@ts-ignore
-                matchMode: matchMode,
-                value: matchMode !== "$between" ? [condition[matchMode]] : condition[matchMode],
+                fieldName: fieldName,
+                matchMode: mathcModeValue,
+                value: Array.isArray(rawValue) ? rawValue : [rawValue],
                 parentRule: parentRule,
                 children: []
             };
@@ -123,27 +177,44 @@ var transformFiltersToRules = function (filter, parentRule) {
 };
 var idCounter = 1;
 var generateId = function () { return Date.now() + Math.floor(Math.random() * 1000); };
-var transformRulesToFilters = function (input) {
+var transformRulesToFilters = function (input, viewData) {
     // Helper function to process individual rules
     var processRule = function (rule) {
-        var _a, _b;
-        if (rule.value && rule.value.length > 0) {
+        var _a, _b, _c, _d;
+        var _e, _f;
+        if (rule.value !== undefined && rule.value !== null) {
             // Ensure rule.value is always an array
             var values = typeof rule.value[0] === "object" ? rule.value.map(function (i) { return (i === null || i === void 0 ? void 0 : i.value) ? i === null || i === void 0 ? void 0 : i.value : i; }) : rule === null || rule === void 0 ? void 0 : rule.value;
-            if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between') {
+            if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between' && rule.matchMode !== '$null' && rule.matchMode !== '$notNull') {
                 values = values[0];
             }
-            // Rule transformation
-            var transformedRule = (_a = {},
-                _a[rule.fieldName] = (_b = {},
-                    _b[rule.matchMode] = values // Assuming `value` is always an array with `value` and `label`
-                ,
-                    _b),
-                _a);
-            // If the rule has children (which means it's a rule group), process them
+            var fieldMeta = (_f = (_e = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _e === void 0 ? void 0 : _e.solidFieldsMetadata) === null || _f === void 0 ? void 0 : _f[rule.fieldName];
+            var isManyToMany = (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.type) === 'relation' && (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.relationType) === 'many-to-many';
+            var transformedRule = void 0;
+            if (isManyToMany) {
+                // For many-to-many relations, always use array format for $in/$notIn
+                transformedRule = (_a = {},
+                    _a[rule.fieldName] = {
+                        id: (_b = {},
+                            _b[rule.matchMode] = values // Keep as array
+                        ,
+                            _b)
+                    },
+                    _a);
+            }
+            else {
+                // Rule transformation
+                transformedRule = (_c = {},
+                    _c[rule.fieldName] = (_d = {},
+                        _d[rule.matchMode] = values // Assuming `value` is always an array with `value` and `label`
+                    ,
+                        _d),
+                    _c);
+            }
             var processedFields = void 0;
             if (rule.children && rule.children.length > 0) {
-                processedFields = rule.children.map(function (child) { return processRuleGroup(child); });
+                processedFields = rule.children.map(function (child) { return processRuleGroup(child); }).filter(function (child) { return child != null; });
+                ;
             }
             if (processedFields) {
                 return __assign(__assign({}, transformedRule), { processedFields: processedFields });
@@ -164,13 +235,24 @@ var transformRulesToFilters = function (input) {
                 // Process the rule group recursively
                 return processRuleGroup(child);
             }
-        });
+        }).filter(function (child) { return child != null; });
+        // If no valid children, return null
+        // if (children.length === 0) {
+        //     return null;
+        // }
+        // If only one child, return it directly without wrapping in operator
+        // if (children.length === 1) {
+        //     return children[0];
+        // }
         return _a = {},
             _a[operator] = children,
             _a;
     };
     // Start processing the root rule group
     var filterObject = processRuleGroup(input);
+    if (!filterObject) {
+        return {};
+    }
     function liftProcessedFields(filters) {
         if (!filters || typeof filters !== 'object')
             return filters;
@@ -291,6 +373,24 @@ export var mergeSearchAndCustomFilters = function (transformedFilter, newFilter,
     // Return the combined filters object
     return filters;
 };
+export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilter, preDefinedFilter) {
+    var filters = {};
+    // Add only non-null filters
+    if (customFilter && Object.keys(customFilter).length > 0) {
+        filters["custom_filter_predicate"] = customFilter;
+    }
+    if (searchFilter && Object.keys(searchFilter).length > 0) {
+        filters["search_predicate"] = searchFilter;
+    }
+    if (savedFilter && Object.keys(savedFilter).length > 0) {
+        filters["saved_filter_predicate"] = savedFilter;
+    }
+    if (preDefinedFilter && Object.keys(preDefinedFilter).length > 0) {
+        filters["predefined_search_predicate"] = preDefinedFilter;
+    }
+    // Return the combined filters object
+    return filters;
+};
 var SavedFilterList = function (_a) {
     var savedfilter = _a.savedfilter, activeSavedFilter = _a.activeSavedFilter, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible;
     return (_jsxs("div", { className: "flex align-items-center justify-content-between gap-2", children: [_jsxs("div", { children: [_jsx(Button, { text: true, size: "small", className: "text-base py-1 w-full", severity: Number(activeSavedFilter) == savedfilter.id ? "secondary" : "contrast", onClick: function () { return applySavedFilter(savedfilter); }, children: savedfilter.name }), (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description) && _jsx("p", { className: "text-xs pl-3", children: savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description })] }), _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(Button, { icon: "pi pi-pencil", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return openSavedCustomFilter(savedfilter); } }), _jsx(Button, { icon: "pi pi-trash", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () {
@@ -345,135 +445,186 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         }
     ];
     var _b = useState(defaultState), initialState = _b[0], setInitialState = _b[1];
+    var pathname = usePathname();
     var searchParams = useSearchParams(); // Converts the query params to a string
     var activeSavedFilter = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("savedQuery");
     var router = useRouter();
     var chipsRef = useRef(null);
+    // filterRules is used to maintian the ui of custom filter 
+    // customFilter is used to maintian the transformed filter object of custom filter
     var _c = useState(initialState), filterRules = _c[0], setFilterRules = _c[1];
-    var _d = useState([]), fields = _d[0], setFields = _d[1];
-    var _e = useState([]), searchableFields = _e[0], setSearchableFields = _e[1];
-    var _f = useState([]), predefinedSearches = _f[0], setPredefinedSearches = _f[1];
-    var _g = useState(false), showGlobalSearchElement = _g[0], setShowGlobalSearchElement = _g[1];
-    var _h = useState(""), customChip = _h[0], setCustomChip = _h[1];
+    var _d = useState(null), customFilter = _d[0], setCustomFilter = _d[1];
+    var _e = useState([]), fields = _e[0], setFields = _e[1];
+    var _f = useState([]), searchableFields = _f[0], setSearchableFields = _f[1];
+    // used to show the list of predefined searches 
+    var _g = useState([]), predefinedSearches = _g[0], setPredefinedSearches = _g[1];
+    // used to open / close the custom fitler popup 
+    var _h = useState(false), showGlobalSearchElement = _h[0], setShowGlobalSearchElement = _h[1];
+    // searchChips maintain the ui to display searched query 
+    // searchFilter maintain the transformed filter of the  searched query 
     var _j = useState([]), searchChips = _j[0], setSearchChips = _j[1];
-    var _k = useState(null), predefinedSearchChip = _k[0], setPredefinedSearchChip = _k[1];
-    var _l = useState(""), inputValue = _l[0], setInputValue = _l[1];
-    var _m = useState(null), searchFilter = _m[0], setSearchFilter = _m[1];
-    var _o = useState(null), customFilter = _o[0], setCustomFilter = _o[1];
-    var _p = useState(false), hasSearched = _p[0], setHasSearched = _p[1];
-    var _q = useState(), currentSavedFilterData = _q[0], setCurrentSavedFilterData = _q[1];
-    var _r = useState(), savedFilterTobeDeleted = _r[0], setSavedFilterTobeDeleted = _r[1];
-    var _s = useState(false), isDeleteSQDialogVisible = _s[0], setIsDeleteSQDialogVisible = _s[1];
-    var _t = useState(), savedFilterQueryString = _t[0], setSavedFilterQueryString = _t[1];
-    var _u = useState(false), showOverlay = _u[0], setShowOverlay = _u[1];
+    var _k = useState(null), searchFilter = _k[0], setSearchFilter = _k[1];
+    // predefinedSearchChip maintain the ui to display predefined searches query 
+    var _l = useState(null), predefinedSearchChip = _l[0], setPredefinedSearchChip = _l[1];
+    //  state to maintain the text typed in the search input box
+    var _m = useState(""), inputValue = _m[0], setInputValue = _m[1];
+    // flag to prevent un necessary re renders
+    var _o = useState(false), hasSearched = _o[0], setHasSearched = _o[1];
+    // currentSavedFilterData  is used to save the whole object of saved filter 
+    var _p = useState(), currentSavedFilterData = _p[0], setCurrentSavedFilterData = _p[1];
+    var _q = useState(), currentSavedFilterQuery = _q[0], setCurrentSavedFilterQuery = _q[1];
+    var _r = useState(), currentSavedFilterRules = _r[0], setCurrentSavedFilterRules = _r[1];
+    var _s = useState(false), showSavedFilterComponent = _s[0], setShowSavedFilterComponent = _s[1];
+    var _t = useState(), savedFilterTobeDeleted = _t[0], setSavedFilterTobeDeleted = _t[1];
+    var _u = useState(false), isDeleteSQDialogVisible = _u[0], setIsDeleteSQDialogVisible = _u[1];
+    var _v = useState(), savedFilterQueryString = _v[0], setSavedFilterQueryString = _v[1];
+    var _w = useState(false), showOverlay = _w[0], setShowOverlay = _w[1];
     var overlayRef = useRef(null);
     var user = useSelector(function (state) { return state.auth; }).user;
-    var _v = useState([]), savedFilters = _v[0], setSavedFilters = _v[1];
+    var _x = useState(0), refreshKey = _x[0], setRefreshKey = _x[1];
+    var _y = useState(null), predefinedSearchBaseFilter = _y[0], setPredefinedSearchBaseFilter = _y[1];
+    var _z = useState([]), savedFilters = _z[0], setSavedFilters = _z[1];
+    var _0 = useState(false), savedFiltersLoaded = _0[0], setSavedFiltersLoaded = _0[1];
     var entityApi = createSolidEntityApi("savedFilters");
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _w = useCreateSolidEntityMutation(), createEntity = _w[0], _x = _w[1], isEntityCreateSuccess = _x.isSuccess, isEntityCreateError = _x.isError, entityCreateError = _x.error;
-    var _y = useUpdateSolidEntityMutation(), updateEntity = _y[0], _z = _y[1], isEntityUpdateSuceess = _z.isSuccess, isEntityUpdateError = _z.isError, entityUpdateError = _z.error;
-    var _0 = useDeleteSolidEntityMutation(), deleteEntity = _0[0], _1 = _0[1], isEntityDeleteSuceess = _1.isSuccess, isEntityDeleteError = _1.isError, entityDeleteError = _1.error;
-    var _2 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _2[0], _3 = _2[1], solidEntityListViewData = _3.data, isLoading = _3.isLoading, error = _3.error;
+    var _1 = useCreateSolidEntityMutation(), createEntity = _1[0], _2 = _1[1], isEntityCreateSuccess = _2.isSuccess, isEntityCreateError = _2.isError, entityCreateError = _2.error;
+    var _3 = useUpdateSolidEntityMutation(), updateEntity = _3[0], _4 = _3[1], isEntityUpdateSuceess = _4.isSuccess, isEntityUpdateError = _4.isError, entityUpdateError = _4.error;
+    var _5 = useDeleteSolidEntityMutation(), deleteEntity = _5[0], _6 = _5[1], isEntityDeleteSuceess = _6.isSuccess, isEntityDeleteError = _6.isError, entityDeleteError = _6.error;
+    var _7 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _7[0], _8 = _7[1], solidEntityListViewData = _8.data, isSavedFilterLoading = _8.isLoading, error = _8.error;
+    var _9 = useState(0), savedFilterFetchDataRefreshKey = _9[0], setSavedFilterFetchDataRefreshKey = _9[1];
     useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var filters = {
-            $or: [
-                {
-                    $and: [
-                        { model: { $in: [(_c = (_b = (_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.id] } },
-                        { view: { $in: [(_d = viewData === null || viewData === void 0 ? void 0 : viewData.solidView) === null || _d === void 0 ? void 0 : _d.id] } },
-                        { user: { $in: [(_e = user === null || user === void 0 ? void 0 : user.user) === null || _e === void 0 ? void 0 : _e.id] } },
-                        { isPrivate: { $eq: true } }
-                    ]
-                },
-                {
-                    $and: [
-                        { model: { $in: [(_h = (_g = (_f = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.id] } },
-                        { view: { $in: [(_j = viewData === null || viewData === void 0 ? void 0 : viewData.solidView) === null || _j === void 0 ? void 0 : _j.id] } },
-                        { isPrivate: { $eq: false } }
-                    ]
+        var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var filters, queryData, queryString, savedFilter;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            return __generator(this, function (_k) {
+                switch (_k.label) {
+                    case 0:
+                        setSavedFiltersLoaded(false);
+                        filters = {
+                            $or: [
+                                {
+                                    $and: [
+                                        { model: { $in: [(_c = (_b = (_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.id] } },
+                                        { view: { $in: [(_d = viewData === null || viewData === void 0 ? void 0 : viewData.solidView) === null || _d === void 0 ? void 0 : _d.id] } },
+                                        { user: { $in: [(_e = user === null || user === void 0 ? void 0 : user.user) === null || _e === void 0 ? void 0 : _e.id] } },
+                                        { isPrivate: { $eq: true } }
+                                    ]
+                                },
+                                {
+                                    $and: [
+                                        { model: { $in: [(_h = (_g = (_f = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.id] } },
+                                        { view: { $in: [(_j = viewData === null || viewData === void 0 ? void 0 : viewData.solidView) === null || _j === void 0 ? void 0 : _j.id] } },
+                                        { isPrivate: { $eq: false } }
+                                    ]
+                                }
+                            ]
+                        };
+                        queryData = {
+                            offset: 0,
+                            limit: 10,
+                            filters: filters,
+                            populate: ["model", "view", "user"],
+                            sort: ["id:desc"],
+                        };
+                        queryString = qs.stringify(queryData, { encodeValuesOnly: true });
+                        setSavedFilterQueryString(queryString);
+                        return [4 /*yield*/, triggerGetSolidEntities(queryString).unwrap()];
+                    case 1:
+                        savedFilter = _k.sent();
+                        if (savedFilter) {
+                            console.log("savedFilter", savedFilter);
+                            setSavedFilters(savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.records);
+                            setSavedFiltersLoaded(true);
+                        }
+                        return [2 /*return*/];
                 }
-            ]
-        };
-        var queryData = {
-            offset: 0,
-            limit: 10,
-            filters: filters,
-            populate: ["model", "view", "user"],
-            sort: ["id:desc"],
-        };
-        var queryString = qs.stringify(queryData, { encodeValuesOnly: true });
-        setSavedFilterQueryString(queryString);
-        triggerGetSolidEntities(queryString);
-    }, [searchParams]);
-    useEffect(function () {
-        if (solidEntityListViewData) {
-            setSavedFilters(solidEntityListViewData.records);
-        }
-    }, [solidEntityListViewData]);
+            });
+        }); };
+        fn();
+    }, [activeSavedFilter, savedFilterFetchDataRefreshKey]);
     useImperativeHandle(ref, function () { return ({
         clearFilter: function () {
             setFilterRules(initialState);
         }
     }); });
     useEffect(function () {
-        var searchChips;
-        var customChips;
-        var parsedSearchParams = searchParams;
-        var savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
-        if (savedQuery && savedFilters.length > 0) {
-            var currentSavedFilterId_1 = Number(savedQuery);
-            var currentSavedFilterData_1 = savedFilters.find(function (savedFilter) { return savedFilter.id === currentSavedFilterId_1; });
-            setCurrentSavedFilterData(currentSavedFilterData_1);
-            if (currentSavedFilterData_1) {
-                var filterJson = JSON.parse(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
-                if (filterJson) {
-                    searchChips = (filterJson === null || filterJson === void 0 ? void 0 : filterJson.s_filter) || null;
-                    customChips = (filterJson === null || filterJson === void 0 ? void 0 : filterJson.c_filter) || null;
+        var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchChips, customChips, parsedSearchParams, queryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter, formattedChips, rules, hydratedRules;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        parsedSearchParams = searchParams;
+                        if (!savedFiltersLoaded) return [3 /*break*/, 3];
+                        if (activeSavedFilter && savedFilters.length === 0)
+                            return [2 /*return*/];
+                        queryObject = queryStringToQueryObject();
+                        // const savedQuery = parsedSearchParams?.get("savedQuery");
+                        if (activeSavedFilter) {
+                            currentSavedFilterId_1 = Number(activeSavedFilter);
+                            currentSavedFilterData_1 = savedFilters.find(function (savedFilter) { return savedFilter.id === currentSavedFilterId_1; });
+                            setCurrentSavedFilterData(currentSavedFilterData_1);
+                            if (currentSavedFilterData_1) {
+                                filterJson = JSON.parse(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
+                                if (filterJson) {
+                                    finalSavedFilter = filterJson;
+                                    setCurrentSavedFilterQuery(finalSavedFilter);
+                                }
+                            }
+                        }
+                        else {
+                            setCurrentSavedFilterData(null);
+                            setCurrentSavedFilterQuery(null);
+                        }
+                        if (queryObject) {
+                            if (queryObject) {
+                                searchChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.search_predicate) || null;
+                                customChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.custom_filter_predicate) || null;
+                            }
+                        }
+                        if (searchChips) {
+                            formattedChips = searchChips === null || searchChips === void 0 ? void 0 : searchChips.$and.map(function (chip, key) {
+                                var _a;
+                                var chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                                var chipValue = (_a = chip[chipKey]) === null || _a === void 0 ? void 0 : _a.$containsi; // Get the value of "$containsi"
+                                var chipdata = {
+                                    columnName: chipKey,
+                                    value: chipValue
+                                };
+                                return chipdata;
+                            });
+                            setSearchChips(formattedChips);
+                            setSearchFilter(searchChips);
+                        }
+                        if (!(customChips && Object.keys(customChips).length !== 0)) return [3 /*break*/, 2];
+                        setCustomFilter(customChips);
+                        rules = transformFiltersToRules(customChips);
+                        return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                    case 1:
+                        hydratedRules = _a.sent();
+                        setFilterRules(hydratedRules);
+                        _a.label = 2;
+                    case 2:
+                        setHasSearched(true);
+                        setRefreshKey(function (prev) { return prev + 1; });
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
                 }
-            }
-        }
-        else {
-            var queryObject = queryStringToQueryObject();
-            if (queryObject) {
-                searchChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.s_filter) || null;
-                customChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.c_filter) || null;
-            }
-        }
-        if (searchChips) {
-            var formattedChips = searchChips === null || searchChips === void 0 ? void 0 : searchChips.$and.map(function (chip, key) {
-                var _a;
-                var chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
-                var chipValue = (_a = chip[chipKey]) === null || _a === void 0 ? void 0 : _a.$containsi; // Get the value of "$containsi"
-                var chipdata = {
-                    columnName: chipKey,
-                    value: chipValue
-                };
-                return chipdata;
             });
-            setSearchChips(formattedChips);
-            setSearchFilter(searchChips);
-            setHasSearched(true);
-        }
-        if (customChips) {
-            setCustomFilter(customChips);
-            var formatedCustomChips = transformFiltersToRules(customChips);
-            setFilterRules([formatedCustomChips]);
-            setHasSearched(true);
-        }
-    }, [searchParams, savedFilters]);
+        }); };
+        fn();
+    }, [activeSavedFilter, savedFilters, savedFiltersLoaded]);
     useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if ((_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidFieldsMetadata) {
             var fieldsData = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidFieldsMetadata;
             // console.log(`fiels data while rendering solid global search element: `);
             // console.log(fieldsData);
-            var children_1 = (_f = (_e = (_d = (_c = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _c === void 0 ? void 0 : _c.solidView) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.children) !== null && _f !== void 0 ? _f : [];
+            var layoutChildren = (_f = (_e = (_d = (_c = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _c === void 0 ? void 0 : _c.solidView) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.children) !== null && _f !== void 0 ? _f : [];
+            var fieldElements_1 = extractFields(layoutChildren);
             var fieldsList = Object.entries(fieldsData !== null && fieldsData !== void 0 ? fieldsData : {}).map(function (_a) {
                 var _b, _c, _d, _e, _f;
                 var key = _a[0], value = _a[1];
-                var viewFieldElement = children_1.find(function (f) { var _a; return ((_a = f === null || f === void 0 ? void 0 : f.attrs) === null || _a === void 0 ? void 0 : _a.name) === key; });
+                var viewFieldElement = fieldElements_1.find(function (f) { var _a; return ((_a = f === null || f === void 0 ? void 0 : f.attrs) === null || _a === void 0 ? void 0 : _a.name) === key; });
                 return {
                     name: value.displayName,
                     value: key,
@@ -520,6 +671,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             var predefinedSearchesList = ((_k = (_j = (_h = (_g = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.layout) === null || _j === void 0 ? void 0 : _j.attrs) === null || _k === void 0 ? void 0 : _k.predefinedSearches) || [];
             setPredefinedSearches(predefinedSearchesList);
         }
+        // used to open the 
     }, []);
     useEffect(function () {
         if (chipsRef.current) {
@@ -531,15 +683,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         }
     }, []);
-    // useEffect(() => {
-    //     // Get the last valid filter
-    //     const validFilters = filters?.$or?.filter((filter: any) => filter !== undefined) || [];
-    //     if (validFilters.length > 0) {
-    //         setCustomChip(validFilters.length.toString()); // Store only the number
-    //     } else {
-    //         setCustomChip(""); // Reset when no filters are present
-    //     }
-    // }, [filters]);
     var handleAddChip = function (columnName) {
         if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) {
             var fallbackField = searchableFields[0]; // guaranteed object
@@ -555,78 +698,54 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newChip_1], false); });
             setInputValue("");
             setHasSearched(true);
+            setRefreshKey(function (prev) { return prev + 1; });
         }
     };
     var clearCustomFilter = function () {
-        var finalFilter = mergeSearchAndCustomFilters(null, searchFilter, "c_filter", "s_filter");
-        handleApplyCustomFilter(finalFilter);
+        // handleApplyCustomFilter(finalFilter)
         setFilterRules(initialState);
         setCustomFilter(null);
-        setPredefinedSearchChip(null);
-        setPredefinedSearchBaseFilter(null);
-    };
-    var handleKeyDown = function (e) {
-        if (e.key === "Enter" && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
-            handleAddChip();
-            e.preventDefault();
-            setShowOverlay(false);
-        }
-        else if (e.key === "Backspace" && inputValue === "") {
-            if (searchChips.length > 0) {
-                // Remove last search chip only
-                setSearchChips(function (prev) { return prev.slice(0, -1); });
-                setHasSearched(true);
-            }
-            else if (customFilter && hasCustomFilterChanged()) {
-                // If there's a custom filter on top of predefined search, remove only the custom part
-                setCustomFilter(predefinedSearchBaseFilter);
-                setFilterRules(initialState);
-                var finalFilter = mergeSearchAndCustomFilters(predefinedSearchBaseFilter, searchFilter, "c_filter", "s_filter");
-                handleApplyCustomFilter(finalFilter);
-            }
-            else if (predefinedSearchChip) {
-                // Remove predefined search chip
-                setPredefinedSearchChip(null);
-                setPredefinedSearchBaseFilter(null);
-                setCustomFilter(null);
-                var finalFilter = mergeSearchAndCustomFilters(null, searchFilter, "c_filter", "s_filter");
-                handleApplyCustomFilter(finalFilter);
-            }
-            else if (customFilter) {
-                clearCustomFilter();
-            }
-        }
-    };
-    var mergeSearchAndCustomFilters = function (transformedFilter, newFilter, transformedFilterName, newFilterName) {
-        var filters = {};
-        // Add only non-null filters
-        if (transformedFilter && Object.keys(transformedFilter).length > 0) {
-            filters[transformedFilterName] = transformedFilter;
-        }
-        if (newFilter && Object.keys(newFilter).length > 0) {
-            filters[newFilterName] = newFilter;
-        }
-        // Return the combined filters object
-        return filters;
+        // setPredefinedSearchChip(null)
+        // setPredefinedSearchBaseFilter(null)
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
     };
-    var transformFilterRules = function (filterRules) {
-        var transformedFilter = transformRulesToFilters(filterRules[0]);
+    var transformCustomFilterRules = function (filterRules) {
+        var transformedFilter = transformRulesToFilters(filterRules[0], viewData);
         // If there's a predefined search, merge it with the new custom filter
         var finalCustomFilter = transformedFilter;
-        if (predefinedSearchChip && predefinedSearchBaseFilter) {
-            // Combine predefined filter with new custom filter
-            finalCustomFilter = {
-                $and: [predefinedSearchBaseFilter, transformedFilter]
-            };
-        }
+        // if (predefinedSearchChip && predefinedSearchBaseFilter) {
+        //     // Combine predefined filter with new custom filter
+        //     finalCustomFilter = {
+        //         $and: [predefinedSearchBaseFilter, transformedFilter]
+        //     };
+        // }
         setCustomFilter(finalCustomFilter);
-        var finalFilter = mergeSearchAndCustomFilters(finalCustomFilter, searchFilter, "c_filter", "s_filter");
-        handleApplyCustomFilter(finalFilter);
+        // handleApplyCustomFilter(finalFilter);
         setShowGlobalSearchElement(false);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    var transformSavedFilterRules = function (filterRules) {
+        var transformedFilter = transformRulesToFilters(filterRules[0], viewData);
+        // If there's a predefined search, merge it with the new custom filter
+        var finalCustomFilter = transformedFilter;
+        // if (predefinedSearchChip && predefinedSearchBaseFilter) {
+        //     // Combine predefined filter with new custom filter
+        //     finalCustomFilter = {
+        //         $and: [predefinedSearchBaseFilter, transformedFilter]
+        //     };
+        // }
+        setCurrentSavedFilterQuery(finalCustomFilter);
+        // handleApplyCustomFilter(finalFilter);
+        setShowSavedFilterComponent(false);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
     };
     useEffect(function () {
-        if (hasSearched === true) {
-            // console.log("searchChips", searchChips);
+        if (refreshKey > 0) {
+            console.log("refres", refreshKey);
+            console.log("hasSearched", hasSearched);
             var formattedChips = {
                 $and: searchChips.map(function (chip) {
                     var _a;
@@ -638,52 +757,21 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     });
                 })
             };
-            // console.log("formattedChips", formattedChips);
-            // if (formattedChips.$and.length > 0) {
-            var transformedFilter = tranformSearchToFilters(formattedChips);
-            setSearchFilter(transformedFilter);
-            var finalFilter = mergeSearchAndCustomFilters(transformedFilter, customFilter, "s_filter", "c_filter");
+            var finalSearchFilter = tranformSearchToFilters(formattedChips);
+            setSearchFilter(finalSearchFilter);
+            var finalSavedFilter = currentSavedFilterQuery;
+            var finalPredefinedFilter = predefinedSearchBaseFilter;
+            var finalCustomFilter = customFilter;
+            console.log("finalCustomFilter", finalCustomFilter);
+            console.log("finalPredefinedFilter", finalPredefinedFilter);
+            console.log("finalSavedFilter", finalSavedFilter);
+            console.log("finalSearchFilter", finalSearchFilter);
+            var finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter);
             handleApplyCustomFilter(finalFilter);
             // }
         }
-    }, [searchChips, hasSearched]);
-    var _4 = useState(null), predefinedSearchBaseFilter = _4[0], setPredefinedSearchBaseFilter = _4[1];
+    }, [refreshKey]);
     // Handle predefined search selection
-    var handlePredefinedSearch = function (predefinedSearch) {
-        if (!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()))
-            return;
-        if (!(predefinedSearch === null || predefinedSearch === void 0 ? void 0 : predefinedSearch.filters)) {
-            console.error('Invalid predefined search: missing filters', predefinedSearch);
-            return;
-        }
-        try {
-            // Replace {{search}} placeholders with actual search value
-            var processedFilter = replacePlaceholders(predefinedSearch.filters, inputValue.trim());
-            // Clear all existing filters and searches
-            setSearchChips([]);
-            setSearchFilter(null);
-            setFilterRules(initialState);
-            // Set the predefined search chip
-            setPredefinedSearchChip({
-                name: predefinedSearch.name,
-                value: inputValue.trim()
-            });
-            setPredefinedSearchBaseFilter(processedFilter);
-            // Apply the predefined search filter as custom filter
-            setCustomFilter(processedFilter);
-            // Apply the filter
-            var finalFilter = mergeSearchAndCustomFilters(processedFilter, null, "c_filter", "s_filter");
-            handleApplyCustomFilter(finalFilter);
-            // Clear input and close overlay
-            setInputValue("");
-            setShowOverlay(false);
-            setHasSearched(true);
-        }
-        catch (error) {
-            console.error('Error applying predefined search:', error);
-            // Optionally show user-friendly error message
-        }
-    };
     var hasCustomFilterChanged = function () {
         if (!predefinedSearchChip || !customFilter || !predefinedSearchBaseFilter) {
             return false;
@@ -691,61 +779,90 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         // Deep comparison to check if filter has changed
         return JSON.stringify(customFilter) !== JSON.stringify(predefinedSearchBaseFilter);
     };
-    // Saved Filter related 
-    var applySavedFilter = function (savedfilter) {
-        // push the savedQuery=1 in url 
-        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
-            router.push("?savedQuery=".concat(savedfilter.id));
-            setShowOverlay(false);
-        }
-        else {
-            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
-        }
-    };
-    var savedQuery = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("savedQuery");
-    useEffect(function () {
-        if (savedQuery && savedFilters.length > 0) {
-            var currentSavedFilterData_2 = savedFilters.find(function (f) { return f.id === Number(savedQuery); });
-            if (currentSavedFilterData_2) {
-                var filterJson = JSON.parse(currentSavedFilterData_2 === null || currentSavedFilterData_2 === void 0 ? void 0 : currentSavedFilterData_2.filterQueryJson);
-                var finalFilter = mergeSearchAndCustomFilters(filterJson === null || filterJson === void 0 ? void 0 : filterJson.c_filter, filterJson === null || filterJson === void 0 ? void 0 : filterJson.s_filter, "c_filter", "s_filter");
-                handleApplyCustomFilter(finalFilter);
+    var openSavedCustomFilter = function (savedfilter) { return __awaiter(void 0, void 0, void 0, function () {
+        var savedfilterId_1, currentSavedFilterData_2, filterJson, finalSavedFilter, rules, hydratedRules;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    //Open custom filter popup 
+                    // router.push(`?savedQuery=${savedfilter.id}`);
+                    // setShowGlobalSearchElement(true);
+                    // // dont refetch the data yet
+                    // const customFilter = JSON.parse(savedfilter.filterQueryJson);
+                    // setCustomFilter(customFilter ? customFilter : null);
+                    // if (customFilter) {
+                    //     const formatedCustomChips: FilterRule = transformFiltersToRules(customFilter ? customFilter : null);
+                    //     setFilterRules(formatedCustomChips ? [formatedCustomChips] : initialState);
+                    // }
+                    setSearchChips([]);
+                    setSearchFilter(null);
+                    setFilterRules(initialState);
+                    setCustomFilter(null);
+                    setPredefinedSearchChip(null);
+                    setPredefinedSearchBaseFilter(null);
+                    if (!(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id)) return [3 /*break*/, 3];
+                    savedfilterId_1 = savedfilter.id;
+                    // router.push(`?savedQuery=${savedfilter.id}`);
+                    setShowOverlay(false);
+                    currentSavedFilterData_2 = savedFilters.find(function (savedFilter) { return savedFilter.id === savedfilterId_1; });
+                    setCurrentSavedFilterData(currentSavedFilterData_2);
+                    if (!currentSavedFilterData_2) return [3 /*break*/, 2];
+                    filterJson = JSON.parse(currentSavedFilterData_2 === null || currentSavedFilterData_2 === void 0 ? void 0 : currentSavedFilterData_2.filterQueryJson);
+                    if (!filterJson) return [3 /*break*/, 2];
+                    finalSavedFilter = filterJson;
+                    setCurrentSavedFilterQuery(finalSavedFilter);
+                    rules = transformFiltersToRules(finalSavedFilter ? finalSavedFilter : null);
+                    return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                case 1:
+                    hydratedRules = _a.sent();
+                    setCurrentSavedFilterRules(hydratedRules ? hydratedRules : initialState);
+                    setShowSavedFilterComponent(true);
+                    _a.label = 2;
+                case 2: return [3 /*break*/, 4];
+                case 3:
+                    console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
             }
-        }
-    }, [savedQuery]);
-    var openSavedCustomFilter = function (savedfilter) {
-        //Open custom filter popup 
-        router.push("?savedQuery=".concat(savedfilter.id));
-        setShowGlobalSearchElement(true);
-        // dont refetch the data yet
-        var customFilter = JSON.parse(savedfilter.filterQueryJson).c_filter;
-        setCustomFilter(customFilter ? customFilter : null);
-        if (customFilter) {
-            var formatedCustomChips = transformFiltersToRules(customFilter ? customFilter : null);
-            setFilterRules(formatedCustomChips ? [formatedCustomChips] : initialState);
-        }
-    };
-    var deleteSavedFilter = function () {
-        // delte the saved filter with id 
-        deleteEntity(savedFilterTobeDeleted);
-        triggerGetSolidEntities(savedFilterQueryString);
-        setIsDeleteSQDialogVisible(false);
-        var parsedSearchParams = searchParams;
-        var savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
-        if (savedFilterTobeDeleted === savedQuery) {
-            var urlParams = new URLSearchParams(window.location.search);
-            urlParams.delete("savedQuery");
-            router.push("?".concat(urlParams.toString()));
-        }
-    };
+        });
+    }); };
+    var deleteSavedFilter = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var parsedSearchParams, savedQuery, urlParams;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // delte the saved filter with id 
+                return [4 /*yield*/, deleteEntity(savedFilterTobeDeleted)];
+                case 1:
+                    // delte the saved filter with id 
+                    _a.sent();
+                    parsedSearchParams = searchParams;
+                    savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
+                    if (savedFilterTobeDeleted == savedQuery) {
+                        urlParams = new URLSearchParams(window.location.search);
+                        urlParams.delete("savedQuery");
+                        router.push("?".concat(urlParams.toString()));
+                    }
+                    setIsDeleteSQDialogVisible(false);
+                    setTimeout(function () {
+                        setSavedFilterFetchDataRefreshKey(function (prev) { return prev + 1; });
+                    }, 500);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     var handleSaveFilter = function (formValues) { return __awaiter(void 0, void 0, void 0, function () {
-        var filterJson, formData, result;
-        var _a, _b, _c, _d, _e, _f;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
+        var filterJson, formData, currentPageUrl, filterJson, formData, result_1, currentPageUrl, error_1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return __generator(this, function (_o) {
+            switch (_o.label) {
                 case 0:
-                    filterJson = mergeSearchAndCustomFilters(customFilter, searchFilter, "c_filter", "s_filter");
                     setShowSaveFilterPopup(false);
+                    _o.label = 1;
+                case 1:
+                    _o.trys.push([1, 6, , 7]);
+                    if (!formValues.id) return [3 /*break*/, 3];
+                    filterJson = currentSavedFilterQuery;
                     formData = new FormData();
                     formData.append("name", formValues.name);
                     formData.append("filterQueryJson", JSON.stringify(filterJson, null, 2));
@@ -753,37 +870,53 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     formData.append("viewId", (_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.id);
                     formData.append("isPrivate", formValues.isPrivate);
                     formData.append("userId", (_f = user === null || user === void 0 ? void 0 : user.user) === null || _f === void 0 ? void 0 : _f.id);
-                    if (!formValues.id) return [3 /*break*/, 2];
                     return [4 /*yield*/, updateEntity({ id: +formValues.id, data: formData }).unwrap()];
-                case 1:
-                    _g.sent();
-                    router.push("?savedQuery=".concat(formValues.id));
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, createEntity(formData).unwrap()];
+                case 2:
+                    _o.sent();
+                    setSearchChips([]);
+                    setSearchFilter(null);
+                    setFilterRules(initialState);
+                    setCustomFilter(null);
+                    setPredefinedSearchChip(null);
+                    currentPageUrl = window.location.pathname;
+                    localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+                    setPredefinedSearchBaseFilter(null);
+                    setTimeout(function () {
+                        router.push("?savedQuery=".concat(formValues.id));
+                    }, 500);
+                    return [3 /*break*/, 5];
                 case 3:
-                    result = _g.sent();
-                    // localStorage.setItem(window.location.pathname, result.data.id);
-                    router.push("?savedQuery=".concat(result.data.id));
-                    _g.label = 4;
-                case 4: return [2 /*return*/];
+                    filterJson = customFilter;
+                    formData = new FormData();
+                    formData.append("name", formValues.name);
+                    formData.append("filterQueryJson", JSON.stringify(filterJson, null, 2));
+                    formData.append("modelId", (_j = (_h = (_g = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.id);
+                    formData.append("viewId", (_l = (_k = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.id);
+                    formData.append("isPrivate", formValues.isPrivate);
+                    formData.append("userId", (_m = user === null || user === void 0 ? void 0 : user.user) === null || _m === void 0 ? void 0 : _m.id);
+                    return [4 /*yield*/, createEntity(formData).unwrap()];
+                case 4:
+                    result_1 = _o.sent();
+                    setSearchChips([]);
+                    setSearchFilter(null);
+                    setFilterRules(initialState);
+                    setCustomFilter(null);
+                    setPredefinedSearchChip(null);
+                    setPredefinedSearchBaseFilter(null);
+                    currentPageUrl = window.location.pathname;
+                    localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+                    setTimeout(function () {
+                        router.push("?savedQuery=".concat(result_1.data.id));
+                    }, 500);
+                    _o.label = 5;
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    error_1 = _o.sent();
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
             }
         });
     }); };
-    var groupedSearchChips = searchChips.reduce(function (acc, chip) {
-        var key = chip.columnName;
-        if (!key)
-            return acc; // skip if undefined
-        if (!acc[key]) {
-            acc[key] = [];
-        }
-        acc[key].push(chip.value);
-        return acc;
-    }, {});
-    var handleRemoveChipGroup = function (columnName) {
-        var updatedChips = searchChips.filter(function (chip) { return chip.columnName !== columnName; });
-        setSearchChips(updatedChips);
-        setHasSearched(true);
-    };
     useEffect(function () {
         // Explicitly type the event as a MouseEvent
         function handleClickOutside(event) {
@@ -799,8 +932,111 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         };
     }, [showOverlay]);
     var CustomChip = function () {
-        var _a, _b;
-        return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2 text-base", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", onClick: function () { return setShowGlobalSearchElement(true); }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: (customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) && ((_a = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "".concat((_b = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _b === void 0 ? void 0 : _b.length) : customFilter.$and.length }), " rules applied"] })] }), _jsx("a", { onClick: clearCustomFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+        var _a, _b, _c, _d;
+        console.log("customFilter", customFilter);
+        var ruleCount = (_d = (_b = (_a = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : (_c = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$and) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : Object.keys(customFilter || {}).length;
+        return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2 text-base", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", onClick: function () {
+                                    setShowGlobalSearchElement(true);
+                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: ruleCount }), " rules applied"] })] }), _jsx("a", { onClick: clearCustomFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+    };
+    //saved filter related code start
+    var applySavedFilter = function (savedfilter) {
+        setSearchChips([]);
+        setSearchFilter(null);
+        setFilterRules(initialState);
+        setCustomFilter(null);
+        setPredefinedSearchChip(null);
+        setPredefinedSearchBaseFilter(null);
+        var currentPageUrl = window.location.pathname; // Get the current page URL
+        localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+        // push the savedQuery=1 in url 
+        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
+            router.push("?savedQuery=".concat(savedfilter.id));
+            setShowOverlay(false);
+        }
+        else {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+        }
+    };
+    var removeSavedFilter = function () {
+        var params = new URLSearchParams(searchParams.toString());
+        setCurrentSavedFilterData(null);
+        setCurrentSavedFilterQuery(null);
+        if (params.has("savedQuery")) {
+            params.delete("savedQuery");
+            var newUrl = params.toString()
+                ? "".concat(pathname, "?").concat(params.toString())
+                : pathname;
+            router.push(newUrl);
+        }
+    };
+    var SavedFiltersChip = function () {
+        return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2 text-base", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", onClick: function () {
+                                    var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
+                                        var rules, hydratedRules;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0:
+                                                    if (!currentSavedFilterQuery) return [3 /*break*/, 2];
+                                                    rules = transformFiltersToRules(currentSavedFilterQuery ? currentSavedFilterQuery : null);
+                                                    return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                                                case 1:
+                                                    hydratedRules = _a.sent();
+                                                    setCurrentSavedFilterRules(hydratedRules ? hydratedRules : initialState);
+                                                    setShowSavedFilterComponent(true);
+                                                    _a.label = 2;
+                                                case 2: return [2 /*return*/];
+                                            }
+                                        });
+                                    }); };
+                                    fn();
+                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsx("span", { children: _jsx("strong", { children: currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name }) })] }), _jsx("a", { onClick: removeSavedFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+    };
+    //saved filter related code end
+    // search related code start
+    var handleRemoveChipGroup = function (columnName) {
+        var updatedChips = searchChips.filter(function (chip) { return chip.columnName !== columnName; });
+        setSearchChips(updatedChips);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    var groupedSearchChips = searchChips.reduce(function (acc, chip) {
+        var key = chip.columnName;
+        if (!key)
+            return acc; // skip if undefined
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(chip.value);
+        return acc;
+    }, {});
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
+            handleAddChip();
+            e.preventDefault();
+            setShowOverlay(false);
+        }
+        else if (e.key === "Backspace" && inputValue === "") {
+            if (searchChips.length > 0) {
+                setSearchChips(function (prev) { return prev.slice(0, -1); });
+            }
+            else if (customFilter) {
+                setCustomFilter(null);
+                setFilterRules(initialState);
+            }
+            else if (predefinedSearchChip) {
+                setPredefinedSearchChip(null);
+                setPredefinedSearchBaseFilter(null);
+            }
+            else if (activeSavedFilter) {
+                removeSavedFilter();
+            }
+            else if (activeSavedFilter) {
+                clearCustomFilter();
+            }
+            setHasSearched(true);
+            setRefreshKey(function (prev) { return prev + 1; });
+        }
     };
     var SearchChip = function () { return (_jsx(_Fragment, { children: Object.entries(groupedSearchChips).map(function (_a) {
             var column = _a[0], values = _a[1];
@@ -809,15 +1045,56 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsx("div", { children: columnDisplayName }), values.map(function (value, index) { return (_jsxs(React.Fragment, { children: [_jsx("span", { className: "custom-chip-value", children: value }, index), index < values.length - 1 &&
                                     _jsx("span", { className: "custom-chip-or", children: "or" })] })); }), _jsx("i", { className: "pi pi-times ml-1", style: { cursor: "pointer" }, onClick: function () { return handleRemoveChipGroup(column); } })] }) }, column));
         }) })); };
+    // search related code end
+    // predefinedfilter related code start
+    var handlePredefinedSearch = function (predefinedSearch) {
+        if (!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()))
+            return;
+        if (!(predefinedSearch === null || predefinedSearch === void 0 ? void 0 : predefinedSearch.filters)) {
+            console.error('Invalid predefined search: missing filters', predefinedSearch);
+            return;
+        }
+        try {
+            // Replace {{search}} placeholders with actual search value
+            var processedFilter = replacePlaceholders(predefinedSearch.filters, inputValue.trim());
+            // Clear all existing filters and searches
+            // setSearchChips([]);
+            // setSearchFilter(null);
+            // setFilterRules(initialState);
+            // setCustomFilter(null)
+            // removeSavedFilter();
+            // Set the predefined search chip
+            setPredefinedSearchChip({
+                name: predefinedSearch.name,
+                value: inputValue.trim()
+            });
+            setPredefinedSearchBaseFilter(processedFilter);
+            // Apply the predefined search filter as custom filter
+            // setCustomFilter(processedFilter);
+            // Apply the filter
+            // handleApplyCustomFilter(finalFilter);
+            // Clear input and close overlay
+            setInputValue("");
+            setShowOverlay(false);
+            setHasSearched(true);
+            setRefreshKey(function (prev) { return prev + 1; });
+        }
+        catch (error) {
+            console.error('Error applying predefined search:', error);
+            // Optionally show user-friendly error message
+        }
+    };
     var removePredefinedSearchChip = function () {
         setPredefinedSearchChip(null);
+        setPredefinedSearchBaseFilter(null);
         setCustomFilter(null);
-        var finalFilter = mergeSearchAndCustomFilters(null, searchFilter, "c_filter", "s_filter");
-        handleApplyCustomFilter(finalFilter);
+        // handleApplyCustomFilter(finalFilter);
         setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
     };
     var PredefinedSearchChip = function () { return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("strong", { children: [predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.name, ":"] }), _jsx("span", { className: "custom-chip-value", children: predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.value })] }), _jsx("i", { className: "pi pi-times ml-1", style: { cursor: "pointer" }, onClick: removePredefinedSearchChip })] }) })); };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex justify-content-center solid-custom-filter-wrapper relative", children: [_jsx("div", { className: "solid-global-search-element", children: _jsxs("ul", { className: "", children: [predefinedSearchChip && _jsx(PredefinedSearchChip, {}), customFilter && (!predefinedSearchChip || hasCustomFilterChanged()) && _jsx(CustomChip, {}), _jsx(SearchChip, {}), _jsx("li", { ref: chipsRef, children: _jsxs("div", { className: "relative", children: [_jsx(InputText, { value: inputValue || "", placeholder: "Search...", onChange: function (e) {
+    // predefinedfilter related code end
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex justify-content-center solid-custom-filter-wrapper relative", children: [_jsx("div", { className: "solid-global-search-element", children: _jsxs("ul", { className: "", children: [currentSavedFilterData && _jsx(SavedFiltersChip, {}), predefinedSearchChip && _jsx(PredefinedSearchChip, {}), customFilter && _jsx(CustomChip, {}), _jsx(SearchChip, {}), _jsx("li", { ref: chipsRef, children: _jsxs("div", { className: "relative solid-global-search-element-wrapper", children: [_jsx(InputText, { value: inputValue || "", placeholder: "Search...", onChange: function (e) {
                                                 setInputValue(e.target.value);
                                                 setShowOverlay(true);
                                             }, onFocus: function () {
@@ -826,7 +1103,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                             }, onBlur: function () {
                                                 // Delay so you can click buttons inside overlay
                                                 setTimeout(function () { return setShowOverlay(false); }, 150);
-                                            }, onKeyDown: handleKeyDown }), _jsx(Button, { icon: "pi pi-search", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return setShowOverlay(true); }, className: "custom-filter-button" })] }) })] }) }), showOverlay && (_jsxs("div", { ref: overlayRef, className: "absolute w-full z-5 surface-0 border-round border-1 border-300 shadow-2", style: { top: 35 }, children: [inputValue ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Search By Fields" }), searchableFields.map(function (value, index) {
+                                            }, onKeyDown: handleKeyDown }), _jsx(Button, { icon: "pi pi-search", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return setShowOverlay(true); }, className: "custom-filter-button" })] }) })] }) }), showOverlay && (_jsxs("div", { ref: overlayRef, className: "absolute w-full z-5 surface-0 border-round border-1 border-300 shadow-2 solid-search-overlay-pannel", style: { top: 35 }, children: [inputValue ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Search By Fields" }), searchableFields.map(function (value, index) {
                                             // console.log("value", value);
                                             return (_jsxs(Button, { className: "p-2 flex gap-1 text-color", 
                                                 // onClick={() => handleAddChip(value)}
@@ -844,6 +1121,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                                             }], false); });
                                                         setInputValue("");
                                                         setHasSearched(true);
+                                                        setRefreshKey(function (prev) { return prev + 1; });
                                                         setShowOverlay(false);
                                                     }
                                                 }, text: true, severity: "secondary", size: "small", children: ["Search ", _jsx("strong", { children: value.displayName }), " for: ", _jsx("span", { className: "font-bold text-color", children: inputValue })] }, index));
@@ -854,9 +1132,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                             _jsxs(_Fragment, { children: [_jsx("div", { className: "p-3 text-base", children: "Search Here..." }), _jsx(Divider, { className: "m-0" })] }), savedFilters.length > 0 &&
                             _jsxs(_Fragment, { children: [_jsxs("div", { className: "p-3", children: [_jsx("p", { className: "font-medium", children: "Saved Filters" }), _jsx("div", { className: "flex flex-column gap-2", children: savedFilters.map(function (savedfilter) {
                                                     return _jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter, applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible });
-                                                }) })] }), _jsx(Divider, { className: "m-0" })] }), _jsx("div", { className: "px-2 py-1", children: _jsx(Button, { text: true, size: "small", label: "Custom Filter", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGlobalSearchElement(true); }, className: "font-bold" }) })] })), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showGlobalSearchElement, style: { width: '65vw' }, onHide: function () { if (!showGlobalSearchElement)
-                        return; setShowGlobalSearchElement(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Add Custom Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowGlobalSearchElement(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-4", children: fields.length > 0 &&
-                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: filterRules, setFilterRules: setFilterRules, transformFilterRules: transformFilterRules, closeDialog: function () { return setShowGlobalSearchElement(false); } }) })] }), _jsx(Dialog, { header: "Save Custom Filter", visible: showSaveFilterPopup, style: { width: 500 }, onHide: function () { if (!showSaveFilterPopup)
-                        return; setShowSaveFilterPopup(false); }, children: _jsx(SolidSaveCustomFilterForm, { currentSavedFilterData: currentSavedFilterData, handleSaveFilter: handleSaveFilter, closeDialog: setShowSaveFilterPopup }) }), _jsx(Dialog, { visible: isDeleteSQDialogVisible, header: "Confirm Delete", modal: true, footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteSavedFilter }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: function () { return setIsDeleteSQDialogVisible(false); } })] })); }, onHide: function () { return setIsDeleteSQDialogVisible(false); }, children: _jsxs("p", { children: ["Are you sure you want to delete the ", currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name, " saved query?"] }) })] }) }));
+                                                }) })] }), _jsx(Divider, { className: "m-0" })] }), _jsx("div", { className: "px-2 py-1", children: _jsx(Button, { text: true, size: "small", label: "Custom Filter", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGlobalSearchElement(true); }, className: "font-bold" }) })] })), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showGlobalSearchElement, style: { width: '65vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showGlobalSearchElement)
+                        return; setShowGlobalSearchElement(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Add Custom Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowGlobalSearchElement(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-3 lg:p-4", children: fields.length > 0 &&
+                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: filterRules, setFilterRules: setFilterRules, transformFilterRules: transformCustomFilterRules, closeDialog: function () { return setShowGlobalSearchElement(false); } }) })] }), _jsxs(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: function () { if (!showSavedFilterComponent)
+                        return; setShowSavedFilterComponent(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Saved Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowSavedFilterComponent(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-3 lg:p-4", children: fields.length > 0 &&
+                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: currentSavedFilterRules, setFilterRules: setCurrentSavedFilterRules, transformFilterRules: transformSavedFilterRules, closeDialog: function () { return setShowSavedFilterComponent(false); } }) })] }), _jsx(Dialog, { header: "Save Custom Filter", className: "solid-custom-filter-dialog", visible: showSaveFilterPopup, style: { width: 500 }, onHide: function () { if (!showSaveFilterPopup)
+                        return; setShowSaveFilterPopup(false); }, children: _jsx(SolidSaveCustomFilterForm, { currentSavedFilterData: currentSavedFilterData, handleSaveFilter: handleSaveFilter, closeDialog: setShowSaveFilterPopup }) }), _jsx(Dialog, { visible: isDeleteSQDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteSavedFilter }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: function () { return setIsDeleteSQDialogVisible(false); } })] })); }, onHide: function () { return setIsDeleteSQDialogVisible(false); }, children: _jsxs("p", { children: ["Are you sure you want to delete the ", currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name, " saved query?"] }) })] }) }));
 });
 //# sourceMappingURL=SolidGlobalSearchElement.js.map