@solidstarters/solid-core-ui 1.1.210 → 1.1.211

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

@@ -1,60 +1,4 @@
 "use client";
-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);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Dialog } from "primereact/dialog";
@@ -70,40 +14,37 @@ 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) {
+const getRandomInt = (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") {
+const extractFields = (nodes = []) => {
+    const result = [];
+    for (const node of nodes) {
+        if (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));
+        if (Array.isArray(node?.children)) {
+            result.push(...extractFields(node.children));
         }
     }
     return result;
 };
-var transformFiltersToRules = function (filter, parentRule) {
-    if (parentRule === void 0) { parentRule = null; }
+const transformFiltersToRules = (filter, 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");
     }
-    var currentId = idCounter++;
+    const currentId = idCounter++;
     if (filter["$or"]) {
         return {
             id: currentId,
             type: FilterRuleType.RULE_GROUP,
             matchOperator: FilterOperator.OR,
-            parentRule: parentRule,
+            parentRule,
             children: filter["$or"]
-                .filter(function (sub) {
+                .filter((sub) => {
                 // Filter out null, undefined, empty strings, and empty objects
                 if (sub == null)
                     return false;
@@ -113,7 +54,7 @@ var transformFiltersToRules = function (filter, parentRule) {
                     return false;
                 return true;
             })
-                .map(function (subFilter) { return transformFiltersToRules(subFilter, currentId); })
+                .map((subFilter) => transformFiltersToRules(subFilter, currentId))
         };
     }
     if (filter["$and"]) {
@@ -121,9 +62,9 @@ var transformFiltersToRules = function (filter, parentRule) {
             id: currentId,
             type: FilterRuleType.RULE_GROUP,
             matchOperator: FilterOperator.AND,
-            parentRule: parentRule,
+            parentRule,
             children: filter["$and"]
-                .filter(function (sub) {
+                .filter((sub) => {
                 // Filter out null, undefined, empty strings, and empty objects
                 if (sub == null)
                     return false;
@@ -133,100 +74,95 @@ var transformFiltersToRules = function (filter, parentRule) {
                     return false;
                 return true;
             })
-                .map(function (subFilter) { return transformFiltersToRules(subFilter, currentId); })
+                .map((subFilter) => transformFiltersToRules(subFilter, currentId))
         };
     }
     // Handle single rule condition
-    for (var fieldName in filter) {
-        var condition = filter[fieldName];
+    for (const fieldName in filter) {
+        const condition = filter[fieldName];
         if (!condition || typeof condition !== "object") {
-            throw new Error("Invalid condition for field '".concat(fieldName, "'"));
+            throw new Error(`Invalid condition for field '${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;
+        if (condition?.id && typeof condition?.id === "object") {
+            for (const matchMode in condition.id) {
+                const rawValue = condition.id[matchMode];
+                const mathcModeValue = matchMode;
                 return {
                     id: currentId,
                     type: FilterRuleType.RULE,
-                    fieldName: fieldName,
+                    fieldName,
                     matchMode: mathcModeValue,
                     value: Array.isArray(rawValue) ? rawValue : [rawValue],
-                    parentRule: parentRule,
+                    parentRule,
                     children: []
                 };
             }
         }
         // CASE 2: normal field → loop stays
-        for (var matchMode in condition) {
-            var rawValue = condition[matchMode];
-            var mathcModeValue = matchMode;
+        for (const matchMode in condition) {
+            const rawValue = condition[matchMode];
+            const mathcModeValue = matchMode;
             return {
                 id: currentId,
                 type: FilterRuleType.RULE,
-                fieldName: fieldName,
+                fieldName,
                 matchMode: mathcModeValue,
                 value: Array.isArray(rawValue) ? rawValue : [rawValue],
-                parentRule: parentRule,
+                parentRule,
                 children: []
             };
         }
     }
     throw new Error(ERROR_MESSAGES.INVALID_FILTER_STRUCTURE);
 };
-var idCounter = 1;
-var generateId = function () { return Date.now() + Math.floor(Math.random() * 1000); };
-var transformRulesToFilters = function (input, viewData) {
+let idCounter = 1;
+const generateId = () => Date.now() + Math.floor(Math.random() * 1000);
+const transformRulesToFilters = (input, viewData) => {
     // Helper function to process individual rules
-    var processRule = function (rule) {
-        var _a, _b, _c, _d;
-        var _e, _f;
+    const processRule = (rule) => {
         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;
+            let values = typeof rule.value[0] === "object" ? rule.value.map((i) => i?.value ? i?.value : i) : rule?.value;
             if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between' && rule.matchMode !== '$null' && rule.matchMode !== '$notNull') {
                 values = values[0];
             }
-            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;
+            const fieldMeta = viewData?.data?.solidFieldsMetadata?.[rule.fieldName];
+            const isManyToMany = fieldMeta?.type === 'relation' && fieldMeta?.relationType === 'many-to-many';
+            let transformedRule;
             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);
+                transformedRule = {
+                    [rule.fieldName]: {
+                        id: {
+                            [rule.matchMode]: values // Keep as array
+                        }
+                    }
+                };
             }
             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);
+                transformedRule = {
+                    [rule.fieldName]: {
+                        [rule.matchMode]: values // Assuming `value` is always an array with `value` and `label`
+                    }
+                };
             }
-            var processedFields = void 0;
+            let processedFields;
             if (rule.children && rule.children.length > 0) {
-                processedFields = rule.children.map(function (child) { return processRuleGroup(child); }).filter(function (child) { return child != null; });
+                processedFields = rule.children.map((child) => processRuleGroup(child)).filter((child) => child != null);
                 ;
             }
             if (processedFields) {
-                return __assign(__assign({}, transformedRule), { processedFields: processedFields });
+                return { ...transformedRule, processedFields };
             }
-            return __assign({}, transformedRule);
+            return { ...transformedRule };
         }
     };
     // Helper function to process rule groups
-    var processRuleGroup = function (ruleGroup) {
-        var _a;
-        var operator = ruleGroup.matchOperator === 'or' ? '$or' : '$and';
-        var children = ruleGroup.children.map(function (child) {
+    const processRuleGroup = (ruleGroup) => {
+        const operator = ruleGroup.matchOperator === 'or' ? '$or' : '$and';
+        const children = ruleGroup.children.map((child) => {
             if (child.type === 'rule') {
                 // Process the rule
                 return processRule(child);
@@ -235,7 +171,7 @@ var transformRulesToFilters = function (input, viewData) {
                 // Process the rule group recursively
                 return processRuleGroup(child);
             }
-        }).filter(function (child) { return child != null; });
+        }).filter((child) => child != null);
         // If no valid children, return null
         // if (children.length === 0) {
         //     return null;
@@ -244,31 +180,30 @@ var transformRulesToFilters = function (input, viewData) {
         // if (children.length === 1) {
         //     return children[0];
         // }
-        return _a = {},
-            _a[operator] = children,
-            _a;
+        return {
+            [operator]: children
+        };
     };
     // Start processing the root rule group
-    var filterObject = processRuleGroup(input);
+    const filterObject = processRuleGroup(input);
     if (!filterObject) {
         return {};
     }
     function liftProcessedFields(filters) {
         if (!filters || typeof filters !== 'object')
             return filters;
-        var processArray = function (arr) {
-            var newArr = [];
-            for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
-                var obj = arr_1[_i];
+        const processArray = (arr) => {
+            let newArr = [];
+            for (let obj of arr) {
                 if (obj && obj.processedFields) {
-                    var processed = processArray(obj.processedFields); // Recursively process nested processedFields
+                    let processed = processArray(obj.processedFields); // Recursively process nested processedFields
                     delete obj.processedFields;
-                    newArr.push.apply(newArr, __spreadArray([obj], processed, false));
+                    newArr.push(obj, ...processed);
                 }
                 else {
                     newArr.push(obj);
                 }
-                for (var key in obj) {
+                for (let key in obj) {
                     if (Array.isArray(obj[key])) {
                         obj[key] = processArray(obj[key]);
                     }
@@ -276,7 +211,7 @@ var transformRulesToFilters = function (input, viewData) {
             }
             return newArr;
         };
-        for (var key in filters) {
+        for (let key in filters) {
             if (Array.isArray(filters[key])) {
                 filters[key] = processArray(filters[key]);
             }
@@ -287,31 +222,24 @@ var transformRulesToFilters = function (input, viewData) {
 };
 // Build nested condition for relation fields
 function buildNestedCondition(path, operatorKey, value) {
-    var _a;
-    var keys = path.split(".").filter(Boolean);
-    var leaf = (_a = {}, _a[operatorKey] = value, _a);
-    return keys.reduceRight(function (acc, key) {
-        var _a;
-        return (_a = {}, _a[key] = acc, _a);
-    }, leaf);
+    const keys = path.split(".").filter(Boolean);
+    const leaf = { [operatorKey]: value };
+    return keys.reduceRight((acc, key) => ({ [key]: acc }), leaf);
 }
-var tranformSearchToFilters = function (input) {
+const tranformSearchToFilters = (input) => {
     if (!input || !input.$and)
         return input;
-    var grouped = {};
-    input.$and.forEach(function (_a) {
-        var _b;
-        var _c, _d;
-        var fieldName = _a.fieldName, value = _a.value, searchField = _a.searchField, matchMode = _a.matchMode;
-        var val = Array.isArray(value) && value.length === 1 ? value[0] : value;
+    const grouped = {};
+    input.$and.forEach(({ fieldName, value, searchField, matchMode }) => {
+        const val = Array.isArray(value) && value.length === 1 ? value[0] : value;
         if (!grouped[fieldName]) {
             grouped[fieldName] = { values: [], searchField: searchField || "", matchMode: matchMode || "$containsi" };
         }
         if (Array.isArray(val)) {
-            (_c = grouped[fieldName]) === null || _c === void 0 ? void 0 : (_b = _c.values).push.apply(_b, val);
+            grouped[fieldName]?.values.push(...val);
         }
         else {
-            (_d = grouped[fieldName]) === null || _d === void 0 ? void 0 : _d.values.push(val);
+            grouped[fieldName]?.values.push(val);
         }
     });
     // return {
@@ -321,11 +249,9 @@ var tranformSearchToFilters = function (input) {
     //         }
     //     }))
     // };
-    var andFilters = [];
-    Object.entries(grouped).forEach(function (_a) {
-        var _b;
-        var fieldName = _a[0], value = _a[1];
-        var isNested = value.searchField ? value.searchField.includes(".") : false;
+    const andFilters = [];
+    Object.entries(grouped).forEach(([fieldName, value]) => {
+        const isNested = value.searchField ? value.searchField.includes(".") : false;
         if (isNested) {
             // NESTED: use $eq and expand dot-notation into nested objects
             if (value.values.length === 1) {
@@ -333,26 +259,23 @@ var tranformSearchToFilters = function (input) {
             }
             else {
                 andFilters.push({
-                    $or: value.values.map(function (v) { return buildNestedCondition(value.searchField, value.matchMode, v); }),
+                    $or: value.values.map(v => buildNestedCondition(value.searchField, value.matchMode, v)),
                 });
             }
         }
         else {
             if (value.values.length === 1) {
-                andFilters.push((_b = {},
-                    _b[fieldName] = {
+                andFilters.push({
+                    [fieldName]: {
                         $containsi: value.values[0]
-                    },
-                    _b));
+                    }
+                });
             }
             else {
                 andFilters.push({
-                    $or: value.values.map(function (v) {
-                        var _a;
-                        return (_a = {},
-                            _a[fieldName] = { $containsi: v },
-                            _a);
-                    })
+                    $or: value.values.map((v) => ({
+                        [fieldName]: { $containsi: v }
+                    }))
                 });
             }
         }
@@ -361,8 +284,8 @@ var tranformSearchToFilters = function (input) {
         $and: andFilters
     };
 };
-export var mergeSearchAndCustomFilters = function (transformedFilter, newFilter, transformedFilterName, newFilterName) {
-    var filters = {};
+export const mergeSearchAndCustomFilters = (transformedFilter, newFilter, transformedFilterName, newFilterName) => {
+    const filters = {};
     // Add only non-null filters
     if (transformedFilter && Object.keys(transformedFilter).length > 0) {
         filters[transformedFilterName] = transformedFilter;
@@ -373,8 +296,8 @@ export var mergeSearchAndCustomFilters = function (transformedFilter, newFilter,
     // Return the combined filters object
     return filters;
 };
-export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilter, preDefinedFilter) {
-    var filters = {};
+export const mergeAllDiffFilters = (customFilter, searchFilter, savedFilter, preDefinedFilter) => {
+    const filters = {};
     // Add only non-null filters
     if (customFilter && Object.keys(customFilter).length > 0) {
         filters["custom_filter_predicate"] = customFilter;
@@ -391,32 +314,30 @@ export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilt
     // 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 () {
+const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, openSavedCustomFilter, setSavedFilterTobeDeleted, 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: () => applySavedFilter(savedfilter), children: savedfilter.name }), savedfilter?.description && _jsx("p", { className: "text-xs pl-3", children: 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: () => openSavedCustomFilter(savedfilter) }), _jsx(Button, { icon: "pi pi-trash", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: () => {
                             setSavedFilterTobeDeleted(savedfilter.id),
                                 setIsDeleteSQDialogVisible(true);
                         } })] })] }));
 };
-var replacePlaceholders = function (obj, searchValue) {
+const replacePlaceholders = (obj, searchValue) => {
     if (typeof obj === 'string') {
         return obj.replace(/\{\{search\}\}/g, searchValue);
     }
     if (Array.isArray(obj)) {
-        return obj.map(function (item) { return replacePlaceholders(item, searchValue); });
+        return obj.map(item => replacePlaceholders(item, searchValue));
     }
     if (obj && typeof obj === 'object') {
-        var newObj = {};
-        for (var key in obj) {
+        const newObj = {};
+        for (const key in obj) {
             newObj[key] = replacePlaceholders(obj[key], searchValue);
         }
         return newObj;
     }
     return obj;
 };
-export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
-    var viewData = _a.viewData, handleApplyCustomFilter = _a.handleApplyCustomFilter, filters = _a.filters, clearFilter = _a.clearFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup;
-    var defaultState = [
+export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCustomFilter, filters, clearFilter, showSaveFilterPopup, setShowSaveFilterPopup }, ref) => {
+    const defaultState = [
         {
             id: 1,
             type: FilterRuleType.RULE_GROUP,
@@ -444,199 +365,177 @@ 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);
+    const [initialState, setInitialState] = useState(defaultState);
+    const pathname = usePathname();
+    const searchParams = useSearchParams(); // Converts the query params to a string
+    const activeSavedFilter = searchParams?.get("savedQuery");
+    const router = useRouter();
+    const 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(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];
+    const [filterRules, setFilterRules] = useState(initialState);
+    const [customFilter, setCustomFilter] = useState(null);
+    const [fields, setFields] = useState([]);
+    const [searchableFields, setSearchableFields] = useState([]);
     // used to show the list of predefined searches 
-    var _g = useState([]), predefinedSearches = _g[0], setPredefinedSearches = _g[1];
+    const [predefinedSearches, setPredefinedSearches] = useState([]);
     // used to open / close the custom fitler popup 
-    var _h = useState(false), showGlobalSearchElement = _h[0], setShowGlobalSearchElement = _h[1];
+    const [showGlobalSearchElement, setShowGlobalSearchElement] = useState(false);
     // 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), searchFilter = _k[0], setSearchFilter = _k[1];
+    const [searchChips, setSearchChips] = useState([]);
+    const [searchFilter, setSearchFilter] = useState(null);
     // predefinedSearchChip maintain the ui to display predefined searches query 
-    var _l = useState(null), predefinedSearchChip = _l[0], setPredefinedSearchChip = _l[1];
+    const [predefinedSearchChip, setPredefinedSearchChip] = useState(null);
     //  state to maintain the text typed in the search input box
-    var _m = useState(""), inputValue = _m[0], setInputValue = _m[1];
+    const [inputValue, setInputValue] = useState("");
     // flag to prevent un necessary re renders
-    var _o = useState(false), hasSearched = _o[0], setHasSearched = _o[1];
+    const [hasSearched, setHasSearched] = useState(false);
     // 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 _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 _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 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*/];
-                }
-            });
-        }); };
+    const [currentSavedFilterData, setCurrentSavedFilterData] = useState();
+    const [currentSavedFilterQuery, setCurrentSavedFilterQuery] = useState();
+    const [currentSavedFilterRules, setCurrentSavedFilterRules] = useState();
+    const [showSavedFilterComponent, setShowSavedFilterComponent] = useState(false);
+    const [savedFilterTobeDeleted, setSavedFilterTobeDeleted] = useState();
+    const [isDeleteSQDialogVisible, setIsDeleteSQDialogVisible] = useState(false);
+    const [savedFilterQueryString, setSavedFilterQueryString] = useState();
+    const [showOverlay, setShowOverlay] = useState(false);
+    const overlayRef = useRef(null);
+    const { user } = useSelector((state) => state.auth);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const [predefinedSearchBaseFilter, setPredefinedSearchBaseFilter] = useState(null);
+    const [savedFilters, setSavedFilters] = useState([]);
+    const [savedFiltersLoaded, setSavedFiltersLoaded] = useState(false);
+    const entityApi = createSolidEntityApi("savedFilters");
+    const { useCreateSolidEntityMutation, useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery } = entityApi;
+    const [createEntity, { isSuccess: isEntityCreateSuccess, isError: isEntityCreateError, error: entityCreateError },] = useCreateSolidEntityMutation();
+    const [updateEntity, { isSuccess: isEntityUpdateSuceess, isError: isEntityUpdateError, error: entityUpdateError },] = useUpdateSolidEntityMutation();
+    const [deleteEntity, { isSuccess: isEntityDeleteSuceess, isError: isEntityDeleteError, error: entityDeleteError },] = useDeleteSolidEntityMutation();
+    const [triggerGetSolidEntities, { data: solidEntityListViewData, isLoading: isSavedFilterLoading, error }] = useLazyGetSolidEntitiesQuery();
+    const [savedFilterFetchDataRefreshKey, setSavedFilterFetchDataRefreshKey] = useState(0);
+    useEffect(() => {
+        const fn = async () => {
+            setSavedFiltersLoaded(false);
+            const filters = {
+                $or: [
+                    {
+                        $and: [
+                            { model: { $in: [viewData?.data?.solidView?.model?.id] } },
+                            { view: { $in: [viewData?.solidView?.id] } },
+                            { user: { $in: [user?.user?.id] } },
+                            { isPrivate: { $eq: true } }
+                        ]
+                    },
+                    {
+                        $and: [
+                            { model: { $in: [viewData?.data?.solidView?.model?.id] } },
+                            { view: { $in: [viewData?.solidView?.id] } },
+                            { isPrivate: { $eq: false } }
+                        ]
+                    }
+                ]
+            };
+            const queryData = {
+                offset: 0,
+                limit: 10,
+                filters: filters,
+                populate: ["model", "view", "user"],
+                sort: ["id:desc"],
+            };
+            const queryString = qs.stringify(queryData, { encodeValuesOnly: true });
+            setSavedFilterQueryString(queryString);
+            const savedFilter = await triggerGetSolidEntities(queryString).unwrap();
+            if (savedFilter) {
+                console.log("savedFilter", savedFilter);
+                setSavedFilters(savedFilter?.records);
+                setSavedFiltersLoaded(true);
+            }
+        };
         fn();
     }, [activeSavedFilter, savedFilterFetchDataRefreshKey]);
-    useImperativeHandle(ref, function () { return ({
-        clearFilter: function () {
+    useImperativeHandle(ref, () => ({
+        clearFilter: () => {
             setFilterRules(initialState);
         }
-    }); });
-    useEffect(function () {
-        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);
+    }));
+    useEffect(() => {
+        const fn = async () => {
+            let searchChips;
+            let customChips;
+            let parsedSearchParams = searchParams;
+            if (savedFiltersLoaded) {
+                if (activeSavedFilter && savedFilters.length === 0)
+                    return;
+                const queryObject = queryStringToQueryObject();
+                // const savedQuery = parsedSearchParams?.get("savedQuery");
+                if (activeSavedFilter) {
+                    const currentSavedFilterId = Number(activeSavedFilter);
+                    const currentSavedFilterData = savedFilters.find((savedFilter) => savedFilter.id === currentSavedFilterId);
+                    setCurrentSavedFilterData(currentSavedFilterData);
+                    if (currentSavedFilterData) {
+                        const filterJson = JSON.parse(currentSavedFilterData?.filterQueryJson);
+                        if (filterJson) {
+                            let finalSavedFilter = filterJson;
+                            setCurrentSavedFilterQuery(finalSavedFilter);
                         }
-                        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 {
+                    setCurrentSavedFilterData(null);
+                    setCurrentSavedFilterQuery(null);
+                }
+                if (queryObject) {
+                    if (queryObject) {
+                        searchChips = queryObject?.search_predicate || null;
+                        customChips = queryObject?.custom_filter_predicate || null;
+                    }
+                }
+                if (searchChips) {
+                    const formattedChips = searchChips?.$and.map((chip, key) => {
+                        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);
+                    setSearchFilter(searchChips);
+                }
+                if (customChips && Object.keys(customChips).length !== 0) {
+                    setCustomFilter(customChips);
+                    const rules = transformFiltersToRules(customChips);
+                    const hydratedRules = await hydrateRelationRules([rules], viewData);
+                    setFilterRules(hydratedRules);
+                }
+                setHasSearched(true);
+                setRefreshKey((prev) => prev + 1);
+            }
+        };
         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;
+    useEffect(() => {
+        if (viewData?.data?.solidFieldsMetadata) {
+            let fieldsData = viewData?.data?.solidFieldsMetadata;
             // console.log(`fiels data while rendering solid global search element: `);
             // console.log(fieldsData);
-            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 = 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; });
+            const layoutChildren = viewData?.data?.solidView?.layout?.children ?? [];
+            const fieldElements = extractFields(layoutChildren);
+            const fieldsList = Object.entries(fieldsData ?? {}).map(([key, value]) => {
+                const viewFieldElement = fieldElements.find((f) => f?.attrs?.name === key);
                 return {
                     name: value.displayName,
                     value: key,
                     type: value.type,
                     ormType: value.ormType,
-                    matchMode: (_b = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _b === void 0 ? void 0 : _b.searchMatchMode,
-                    searchField: (_d = (_c = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _c === void 0 ? void 0 : _c.searchField) !== null && _d !== void 0 ? _d : null,
-                    isSearchable: (_f = (_e = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _e === void 0 ? void 0 : _e.isSearchable) !== null && _f !== void 0 ? _f : false,
+                    matchMode: viewFieldElement?.attrs?.searchMatchMode,
+                    searchField: viewFieldElement?.attrs?.searchField ?? null,
+                    isSearchable: viewFieldElement?.attrs?.isSearchable ?? false,
                 };
             });
             setFields(fieldsList);
-            var searchableFieldsList = fieldsList.filter(function (field) {
+            const searchableFieldsList = fieldsList.filter((field) => {
                 if (!field.isSearchable)
                     return false;
                 switch (field.type) {
@@ -657,63 +556,63 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             });
             // console.log("searchableFieldsList", searchableFieldsList);
             // Optionally map to a minimal structure if needed for UI
-            var finalSearchableFieldsList = searchableFieldsList.map(function (field) {
-                var _a;
-                return ({
-                    fieldName: field.value,
-                    displayName: field.name,
-                    searchField: (_a = field.searchField) !== null && _a !== void 0 ? _a : "",
-                    matchMode: field.matchMode
-                });
-            });
+            let finalSearchableFieldsList = searchableFieldsList.map((field) => ({
+                fieldName: field.value,
+                displayName: field.name,
+                searchField: field.searchField ?? "",
+                matchMode: field.matchMode
+            }));
             // console.log("finalSearchableFieldsList", finalSearchableFieldsList);
             setSearchableFields(finalSearchableFieldsList);
-            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) || [];
+            const predefinedSearchesList = viewData?.data?.solidView?.layout?.attrs?.predefinedSearches || [];
             setPredefinedSearches(predefinedSearchesList);
         }
         // used to open the 
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         if (chipsRef.current) {
-            var inputElement = chipsRef.current.querySelector("input");
+            const inputElement = chipsRef.current.querySelector("input");
             if (inputElement) {
-                inputElement.addEventListener("input", function (e) {
+                inputElement.addEventListener("input", (e) => {
                     setInputValue(e.target.value);
                 });
             }
         }
     }, []);
-    var handleAddChip = function (columnName) {
-        if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) {
-            var fallbackField = searchableFields[0]; // guaranteed object
+    const handleAddChip = (columnName) => {
+        if (inputValue?.trim()) {
+            const fallbackField = searchableFields[0]; // guaranteed object
             if (!fallbackField)
                 return;
-            var newChip_1 = {
-                columnName: columnName || fallbackField.fieldName,
-                value: inputValue.trim(),
+            // Support comma-separated values: split, trim and add as separate chips
+            const values = inputValue.split(",").map(v => v.trim()).filter(v => v !== "");
+            const fieldName = columnName || fallbackField.fieldName;
+            const chipsToAdd = values.map(v => ({
+                columnName: fieldName,
+                value: v,
                 columnDisplayName: fallbackField.displayName,
                 searchField: fallbackField.searchField,
                 matchMode: fallbackField.matchMode
-            };
-            setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newChip_1], false); });
+            }));
+            setSearchChips((prev) => [...prev, ...chipsToAdd]);
             setInputValue("");
             setHasSearched(true);
-            setRefreshKey(function (prev) { return prev + 1; });
+            setRefreshKey((prev) => prev + 1);
         }
     };
-    var clearCustomFilter = function () {
+    const clearCustomFilter = () => {
         // handleApplyCustomFilter(finalFilter)
         setFilterRules(initialState);
         setCustomFilter(null);
         // setPredefinedSearchChip(null)
         // setPredefinedSearchBaseFilter(null)
         setHasSearched(true);
-        setRefreshKey(function (prev) { return prev + 1; });
+        setRefreshKey((prev) => prev + 1);
     };
-    var transformCustomFilterRules = function (filterRules) {
-        var transformedFilter = transformRulesToFilters(filterRules[0], viewData);
+    const transformCustomFilterRules = (filterRules) => {
+        const transformedFilter = transformRulesToFilters(filterRules[0], viewData);
         // If there's a predefined search, merge it with the new custom filter
-        var finalCustomFilter = transformedFilter;
+        let finalCustomFilter = transformedFilter;
         // if (predefinedSearchChip && predefinedSearchBaseFilter) {
         //     // Combine predefined filter with new custom filter
         //     finalCustomFilter = {
@@ -724,12 +623,12 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         // handleApplyCustomFilter(finalFilter);
         setShowGlobalSearchElement(false);
         setHasSearched(true);
-        setRefreshKey(function (prev) { return prev + 1; });
+        setRefreshKey((prev) => prev + 1);
     };
-    var transformSavedFilterRules = function (filterRules) {
-        var transformedFilter = transformRulesToFilters(filterRules[0], viewData);
+    const transformSavedFilterRules = (filterRules) => {
+        const transformedFilter = transformRulesToFilters(filterRules[0], viewData);
         // If there's a predefined search, merge it with the new custom filter
-        var finalCustomFilter = transformedFilter;
+        let finalCustomFilter = transformedFilter;
         // if (predefinedSearchChip && predefinedSearchBaseFilter) {
         //     // Combine predefined filter with new custom filter
         //     finalCustomFilter = {
@@ -740,184 +639,150 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         // handleApplyCustomFilter(finalFilter);
         setShowSavedFilterComponent(false);
         setHasSearched(true);
-        setRefreshKey(function (prev) { return prev + 1; });
+        setRefreshKey((prev) => prev + 1);
     };
-    useEffect(function () {
+    useEffect(() => {
         if (refreshKey > 0) {
             console.log("refres", refreshKey);
             console.log("hasSearched", hasSearched);
-            var formattedChips = {
-                $and: searchChips.map(function (chip) {
-                    var _a;
-                    return ({
-                        fieldName: chip.columnName,
-                        matchMode: chip.matchMode,
-                        value: [chip.value],
-                        searchField: (_a = chip.searchField) !== null && _a !== void 0 ? _a : "",
-                    });
-                })
+            const formattedChips = {
+                $and: searchChips.map((chip) => ({
+                    fieldName: chip.columnName,
+                    matchMode: chip.matchMode,
+                    value: [chip.value],
+                    searchField: chip.searchField ?? "",
+                }))
             };
-            var finalSearchFilter = tranformSearchToFilters(formattedChips);
+            const finalSearchFilter = tranformSearchToFilters(formattedChips);
             setSearchFilter(finalSearchFilter);
-            var finalSavedFilter = currentSavedFilterQuery;
-            var finalPredefinedFilter = predefinedSearchBaseFilter;
-            var finalCustomFilter = customFilter;
+            let finalSavedFilter = currentSavedFilterQuery;
+            const finalPredefinedFilter = predefinedSearchBaseFilter;
+            const 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);
+            const finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter);
             handleApplyCustomFilter(finalFilter);
             // }
         }
     }, [refreshKey]);
     // Handle predefined search selection
-    var hasCustomFilterChanged = function () {
+    const hasCustomFilterChanged = () => {
         if (!predefinedSearchChip || !customFilter || !predefinedSearchBaseFilter) {
             return false;
         }
         // Deep comparison to check if filter has changed
         return JSON.stringify(customFilter) !== JSON.stringify(predefinedSearchBaseFilter);
     };
-    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;
+    const openSavedCustomFilter = async (savedfilter) => {
+        //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);
+        // push the savedQuery=1 in url 
+        if (savedfilter?.id) {
+            const savedfilterId = savedfilter.id;
+            // router.push(`?savedQuery=${savedfilter.id}`);
+            setShowOverlay(false);
+            const currentSavedFilterData = savedFilters.find((savedFilter) => savedFilter.id === savedfilterId);
+            setCurrentSavedFilterData(currentSavedFilterData);
+            if (currentSavedFilterData) {
+                const filterJson = JSON.parse(currentSavedFilterData?.filterQueryJson);
+                if (filterJson) {
+                    let finalSavedFilter = filterJson;
                     setCurrentSavedFilterQuery(finalSavedFilter);
-                    rules = transformFiltersToRules(finalSavedFilter ? finalSavedFilter : null);
-                    return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
-                case 1:
-                    hydratedRules = _a.sent();
+                    const rules = transformFiltersToRules(finalSavedFilter ? finalSavedFilter : null);
+                    const hydratedRules = await hydrateRelationRules([rules], viewData);
                     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*/];
+                }
             }
-        });
-    }); };
-    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*/];
+        }
+        else {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+        }
+    };
+    const deleteSavedFilter = async () => {
+        // delte the saved filter with id 
+        await deleteEntity(savedFilterTobeDeleted);
+        // triggerGetSolidEntities(savedFilterQueryString);
+        let parsedSearchParams = searchParams;
+        const savedQuery = parsedSearchParams?.get("savedQuery");
+        if (savedFilterTobeDeleted == savedQuery) {
+            const urlParams = new URLSearchParams(window.location.search);
+            urlParams.delete("savedQuery");
+            router.push(`?${urlParams.toString()}`);
+        }
+        setIsDeleteSQDialogVisible(false);
+        setTimeout(() => {
+            setSavedFilterFetchDataRefreshKey(prev => prev + 1);
+        }, 500);
+    };
+    const handleSaveFilter = async (formValues) => {
+        setShowSaveFilterPopup(false);
+        try {
+            if (formValues.id) {
+                const filterJson = currentSavedFilterQuery;
+                const formData = new FormData();
+                formData.append("name", formValues.name);
+                formData.append("filterQueryJson", JSON.stringify(filterJson, null, 2));
+                formData.append("modelId", viewData?.data?.solidView?.model?.id);
+                formData.append("viewId", viewData?.data?.solidView?.id);
+                formData.append("isPrivate", formValues.isPrivate);
+                formData.append("userId", user?.user?.id);
+                await updateEntity({ id: +formValues.id, data: formData }).unwrap();
+                setSearchChips([]);
+                setSearchFilter(null);
+                setFilterRules(initialState);
+                setCustomFilter(null);
+                setPredefinedSearchChip(null);
+                const currentPageUrl = window.location.pathname; // Get the current page URL
+                localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+                setPredefinedSearchBaseFilter(null);
+                setTimeout(() => {
+                    router.push(`?savedQuery=${formValues.id}`);
+                }, 500);
             }
-        });
-    }); };
-    var handleSaveFilter = function (formValues) { return __awaiter(void 0, void 0, void 0, function () {
-        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:
-                    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));
-                    formData.append("modelId", (_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);
-                    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);
-                    return [4 /*yield*/, updateEntity({ id: +formValues.id, data: 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:
-                    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*/];
+            else {
+                const filterJson = customFilter;
+                const formData = new FormData();
+                formData.append("name", formValues.name);
+                formData.append("filterQueryJson", JSON.stringify(filterJson, null, 2));
+                formData.append("modelId", viewData?.data?.solidView?.model?.id);
+                formData.append("viewId", viewData?.data?.solidView?.id);
+                formData.append("isPrivate", formValues.isPrivate);
+                formData.append("userId", user?.user?.id);
+                const result = await createEntity(formData).unwrap();
+                setSearchChips([]);
+                setSearchFilter(null);
+                setFilterRules(initialState);
+                setCustomFilter(null);
+                setPredefinedSearchChip(null);
+                setPredefinedSearchBaseFilter(null);
+                const currentPageUrl = window.location.pathname; // Get the current page URL
+                localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+                setTimeout(() => {
+                    router.push(`?savedQuery=${result.data.id}`);
+                }, 500);
             }
-        });
-    }); };
-    useEffect(function () {
+        }
+        catch (error) {
+        }
+    };
+    useEffect(() => {
         // Explicitly type the event as a MouseEvent
         function handleClickOutside(event) {
             if (overlayRef.current && !overlayRef.current.contains(event.target)) {
@@ -927,81 +792,73 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         if (showOverlay) {
             document.addEventListener("mousedown", handleClickOutside);
         }
-        return function () {
+        return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [showOverlay]);
-    var CustomChip = function () {
-        var _a, _b, _c, _d;
+    const CustomChip = () => {
         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 () {
+        const ruleCount = customFilter?.$or?.length ??
+            customFilter?.$and?.length ??
+            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: () => {
                                     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) {
+    const applySavedFilter = (savedfilter) => {
         setSearchChips([]);
         setSearchFilter(null);
         setFilterRules(initialState);
         setCustomFilter(null);
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
-        var currentPageUrl = window.location.pathname; // Get the current page URL
+        const 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));
+        if (savedfilter?.id) {
+            router.push(`?savedQuery=${savedfilter.id}`);
             setShowOverlay(false);
         }
         else {
             console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
         }
     };
-    var removeSavedFilter = function () {
-        var params = new URLSearchParams(searchParams.toString());
+    const removeSavedFilter = () => {
+        const 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())
+            const newUrl = params.toString()
+                ? `${pathname}?${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*/];
-                                            }
-                                        });
-                                    }); };
+    const SavedFiltersChip = () => {
+        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: () => {
+                                    const fn = async () => {
+                                        if (currentSavedFilterQuery) {
+                                            const rules = transformFiltersToRules(currentSavedFilterQuery ? currentSavedFilterQuery : null);
+                                            const hydratedRules = await hydrateRelationRules([rules], viewData);
+                                            setCurrentSavedFilterRules(hydratedRules ? hydratedRules : initialState);
+                                            setShowSavedFilterComponent(true);
+                                        }
+                                    };
                                     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" }) })] }) }));
+                                }, 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?.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; });
+    const handleRemoveChipGroup = (columnName) => {
+        const updatedChips = searchChips.filter(chip => chip.columnName !== columnName);
         setSearchChips(updatedChips);
         setHasSearched(true);
-        setRefreshKey(function (prev) { return prev + 1; });
+        setRefreshKey((prev) => prev + 1);
     };
-    var groupedSearchChips = searchChips.reduce(function (acc, chip) {
-        var key = chip.columnName;
+    const groupedSearchChips = searchChips.reduce((acc, chip) => {
+        const key = chip.columnName;
         if (!key)
             return acc; // skip if undefined
         if (!acc[key]) {
@@ -1010,15 +867,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         acc[key].push(chip.value);
         return acc;
     }, {});
-    var handleKeyDown = function (e) {
-        if (e.key === "Enter" && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && 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); });
+                setSearchChips((prev) => prev.slice(0, -1));
             }
             else if (customFilter) {
                 setCustomFilter(null);
@@ -1035,28 +892,27 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 clearCustomFilter();
             }
             setHasSearched(true);
-            setRefreshKey(function (prev) { return prev + 1; });
+            setRefreshKey((prev) => prev + 1);
         }
     };
-    var SearchChip = function () { return (_jsx(_Fragment, { children: Object.entries(groupedSearchChips).map(function (_a) {
-            var column = _a[0], values = _a[1];
-            var fieldMeta = searchableFields.find(function (f) { return f.fieldName === column; });
-            var columnDisplayName = (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.displayName) || column;
-            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));
-        }) })); };
+    const SearchChip = () => (_jsx(_Fragment, { children: Object.entries(groupedSearchChips).map(([column, values]) => {
+            const fieldMeta = searchableFields.find(f => f.fieldName === column);
+            const columnDisplayName = fieldMeta?.displayName || column;
+            return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsx("div", { children: columnDisplayName }), values.map((value, index) => (_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: () => 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()))
+    const handlePredefinedSearch = (predefinedSearch) => {
+        if (!inputValue?.trim())
             return;
-        if (!(predefinedSearch === null || predefinedSearch === void 0 ? void 0 : predefinedSearch.filters)) {
+        if (!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());
+            const processedFilter = replacePlaceholders(predefinedSearch.filters, inputValue.trim());
             // Clear all existing filters and searches
             // setSearchChips([]);
             // setSearchFilter(null);
@@ -1077,66 +933,66 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             setInputValue("");
             setShowOverlay(false);
             setHasSearched(true);
-            setRefreshKey(function (prev) { return prev + 1; });
+            setRefreshKey((prev) => prev + 1);
         }
         catch (error) {
             console.error('Error applying predefined search:', error);
             // Optionally show user-friendly error message
         }
     };
-    var removePredefinedSearchChip = function () {
+    const removePredefinedSearchChip = () => {
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
         setCustomFilter(null);
         // handleApplyCustomFilter(finalFilter);
         setHasSearched(true);
-        setRefreshKey(function (prev) { return prev + 1; });
+        setRefreshKey((prev) => 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 })] }) })); };
+    const PredefinedSearchChip = () => (_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?.name, ":"] }), _jsx("span", { className: "custom-chip-value", children: predefinedSearchChip?.value })] }), _jsx("i", { className: "pi pi-times ml-1", style: { cursor: "pointer" }, onClick: removePredefinedSearchChip })] }) }));
     // 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) {
+    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: (e) => {
                                                 setInputValue(e.target.value);
                                                 setShowOverlay(true);
-                                            }, onFocus: function () {
-                                                if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())
+                                            }, onFocus: () => {
+                                                if (inputValue?.trim())
                                                     setShowOverlay(true);
-                                            }, onBlur: function () {
+                                            }, onBlur: () => {
                                                 // 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 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) {
+                                                setTimeout(() => setShowOverlay(false), 150);
+                                            }, onKeyDown: handleKeyDown }), _jsx(Button, { icon: "pi pi-search", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: () => 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((value, index) => {
                                             // console.log("value", value);
                                             return (_jsxs(Button, { className: "p-2 flex gap-1 text-color", 
                                                 // onClick={() => handleAddChip(value)}
-                                                onMouseDown: function (e) {
+                                                onMouseDown: (e) => {
                                                     // Prevent focus loss from input
                                                     e.preventDefault();
-                                                    var currentValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
+                                                    const currentValue = inputValue?.trim();
                                                     if (currentValue) {
-                                                        setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), [{
-                                                                columnName: value.fieldName,
-                                                                value: currentValue,
-                                                                columnDisplayName: value.displayName,
-                                                                searchField: value.searchField,
-                                                                matchMode: value.matchMode
-                                                            }], false); });
+                                                        const values = currentValue.split(",").map((v) => v.trim()).filter((v) => v !== "");
+                                                        const chipsToAdd = values.map(v => ({
+                                                            columnName: value.fieldName,
+                                                            value: v,
+                                                            columnDisplayName: value.displayName,
+                                                            searchField: value.searchField,
+                                                            matchMode: value.matchMode
+                                                        }));
+                                                        setSearchChips((prev) => [...prev, ...chipsToAdd]);
                                                         setInputValue("");
                                                         setHasSearched(true);
-                                                        setRefreshKey(function (prev) { return prev + 1; });
+                                                        setRefreshKey((prev) => 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));
-                                        })] }), predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Predefined Searches" }), predefinedSearches.map(function (predefinedSearch, index) { return (_jsxs(Button, { className: "p-2 flex flex-column align-items-start gap-1 text-color", onMouseDown: function (e) {
+                                        })] }), predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Predefined Searches" }), predefinedSearches.map((predefinedSearch, index) => (_jsxs(Button, { className: "p-2 flex flex-column align-items-start gap-1 text-color", onMouseDown: (e) => {
                                                         e.preventDefault();
                                                         handlePredefinedSearch(predefinedSearch);
-                                                    }, text: true, severity: "secondary", size: "small", children: [_jsxs("div", { className: "flex gap-1 align-items-center", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsx("span", { className: "font-bold text-color", children: inputValue })] }), _jsx("div", { className: "text-xs", children: predefinedSearch.description })] }, index)); })] })] }))] })) :
+                                                    }, text: true, severity: "secondary", size: "small", children: [_jsxs("div", { className: "flex gap-1 align-items-center", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsx("span", { className: "font-bold text-color", children: inputValue })] }), _jsx("div", { className: "text-xs", children: predefinedSearch.description })] }, index)))] })] }))] })) :
                             _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' }, 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?"] }) })] }) }));
+                            _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((savedfilter) => _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: () => 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: () => { 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: () => 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: () => 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: () => { 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: () => 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: () => setShowSavedFilterComponent(false) }) })] }), _jsx(Dialog, { header: "Save Custom Filter", className: "solid-custom-filter-dialog", visible: showSaveFilterPopup, style: { width: 500 }, onHide: () => { 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: () => (_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: () => setIsDeleteSQDialogVisible(false) })] })), onHide: () => setIsDeleteSQDialogVisible(false), children: _jsxs("p", { children: ["Are you sure you want to delete the ", currentSavedFilterData?.name, " saved query?"] }) })] }) }));
 });
 //# sourceMappingURL=SolidGlobalSearchElement.js.map