sccoreui 5.8.7 → 5.8.9

package/dist/App.scss

@@ -48,6 +48,11 @@
 }
 
 
+// height and width utility classes
+
+.h-40 {
+  height: 40px;
+}
 
 // @font-face {
 //   font-family: "Lato";
@@ -197,6 +202,31 @@ code {
   }
 }
 
+.bulk-action-feature {
+  .p-overlaypanel-content {
+      padding: 0 !important;
+      border-radius: 6px !important
+  }
+}
+
+.column_group_overlay {
+  overflow: hidden;
+  .p-overlaypanel-content {
+    padding: 0px !important;
+  }
+}
+
+.list-items {
+  padding: 4px;
+  border: 0;
+  .p-treenode-content {
+    padding: 2px !important;
+  }
+  .p-treenode-droppoint {
+    height: 2px;
+  }
+}
+
 .sc_custom_multiselect {
 
   width: max-content;

package/dist/assets/images/drag.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 2.5C7.39782 2.5 7.77936 2.65804 8.06066 2.93934C8.34196 3.22064 8.5 3.60218 8.5 4C8.5 4.39782 8.34196 4.77936 8.06066 5.06066C7.77936 5.34196 7.39782 5.5 7 5.5C6.60218 5.5 6.22064 5.34196 5.93934 5.06066C5.65804 4.77936 5.5 4.39782 5.5 4C5.5 3.60218 5.65804 3.22064 5.93934 2.93934C6.22064 2.65804 6.60218 2.5 7 2.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2.5C13.3978 2.5 13.7794 2.65804 14.0607 2.93934C14.342 3.22064 14.5 3.60218 14.5 4C14.5 4.39782 14.342 4.77936 14.0607 5.06066C13.7794 5.34196 13.3978 5.5 13 5.5C12.6022 5.5 12.2206 5.34196 11.9393 5.06066C11.658 4.77936 11.5 4.39782 11.5 4C11.5 3.60218 11.658 3.22064 11.9393 2.93934C12.2206 2.65804 12.6022 2.5 13 2.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 8.5C7.39782 8.5 7.77936 8.65804 8.06066 8.93934C8.34196 9.22064 8.5 9.60218 8.5 10C8.5 10.3978 8.34196 10.7794 8.06066 11.0607C7.77936 11.342 7.39782 11.5 7 11.5C6.60218 11.5 6.22064 11.342 5.93934 11.0607C5.65804 10.7794 5.5 10.3978 5.5 10C5.5 9.60218 5.65804 9.22064 5.93934 8.93934C6.22064 8.65804 6.60218 8.5 7 8.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.5C13.3978 8.5 13.7794 8.65804 14.0607 8.93934C14.342 9.22064 14.5 9.60218 14.5 10C14.5 10.3978 14.342 10.7794 14.0607 11.0607C13.7794 11.342 13.3978 11.5 13 11.5C12.6022 11.5 12.2206 11.342 11.9393 11.0607C11.658 10.7794 11.5 10.3978 11.5 10C11.5 9.60218 11.658 9.22064 11.9393 8.93934C12.2206 8.65804 12.6022 8.5 13 8.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14.5C7.39782 14.5 7.77936 14.658 8.06066 14.9393C8.34196 15.2206 8.5 15.6022 8.5 16C8.5 16.3978 8.34196 16.7794 8.06066 17.0607C7.77936 17.342 7.39782 17.5 7 17.5C6.60218 17.5 6.22064 17.342 5.93934 17.0607C5.65804 16.7794 5.5 16.3978 5.5 16C5.5 15.6022 5.65804 15.2206 5.93934 14.9393C6.22064 14.658 6.60218 14.5 7 14.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 14.5C13.3978 14.5 13.7794 14.658 14.0607 14.9393C14.342 15.2206 14.5 15.6022 14.5 16C14.5 16.3978 14.342 16.7794 14.0607 17.0607C13.7794 17.342 13.3978 17.5 13 17.5C12.6022 17.5 12.2206 17.342 11.9393 17.0607C11.658 16.7794 11.5 16.3978 11.5 16C11.5 15.6022 11.658 15.2206 11.9393 14.9393C12.2206 14.658 12.6022 14.5 13 14.5Z" fill="#667085"/>
+</svg>

package/dist/assets/svg/drag.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 2.5C7.39782 2.5 7.77936 2.65804 8.06066 2.93934C8.34196 3.22064 8.5 3.60218 8.5 4C8.5 4.39782 8.34196 4.77936 8.06066 5.06066C7.77936 5.34196 7.39782 5.5 7 5.5C6.60218 5.5 6.22064 5.34196 5.93934 5.06066C5.65804 4.77936 5.5 4.39782 5.5 4C5.5 3.60218 5.65804 3.22064 5.93934 2.93934C6.22064 2.65804 6.60218 2.5 7 2.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2.5C13.3978 2.5 13.7794 2.65804 14.0607 2.93934C14.342 3.22064 14.5 3.60218 14.5 4C14.5 4.39782 14.342 4.77936 14.0607 5.06066C13.7794 5.34196 13.3978 5.5 13 5.5C12.6022 5.5 12.2206 5.34196 11.9393 5.06066C11.658 4.77936 11.5 4.39782 11.5 4C11.5 3.60218 11.658 3.22064 11.9393 2.93934C12.2206 2.65804 12.6022 2.5 13 2.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 8.5C7.39782 8.5 7.77936 8.65804 8.06066 8.93934C8.34196 9.22064 8.5 9.60218 8.5 10C8.5 10.3978 8.34196 10.7794 8.06066 11.0607C7.77936 11.342 7.39782 11.5 7 11.5C6.60218 11.5 6.22064 11.342 5.93934 11.0607C5.65804 10.7794 5.5 10.3978 5.5 10C5.5 9.60218 5.65804 9.22064 5.93934 8.93934C6.22064 8.65804 6.60218 8.5 7 8.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.5C13.3978 8.5 13.7794 8.65804 14.0607 8.93934C14.342 9.22064 14.5 9.60218 14.5 10C14.5 10.3978 14.342 10.7794 14.0607 11.0607C13.7794 11.342 13.3978 11.5 13 11.5C12.6022 11.5 12.2206 11.342 11.9393 11.0607C11.658 10.7794 11.5 10.3978 11.5 10C11.5 9.60218 11.658 9.22064 11.9393 8.93934C12.2206 8.65804 12.6022 8.5 13 8.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14.5C7.39782 14.5 7.77936 14.658 8.06066 14.9393C8.34196 15.2206 8.5 15.6022 8.5 16C8.5 16.3978 8.34196 16.7794 8.06066 17.0607C7.77936 17.342 7.39782 17.5 7 17.5C6.60218 17.5 6.22064 17.342 5.93934 17.0607C5.65804 16.7794 5.5 16.3978 5.5 16C5.5 15.6022 5.65804 15.2206 5.93934 14.9393C6.22064 14.658 6.60218 14.5 7 14.5Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 14.5C13.3978 14.5 13.7794 14.658 14.0607 14.9393C14.342 15.2206 14.5 15.6022 14.5 16C14.5 16.3978 14.342 16.7794 14.0607 17.0607C13.7794 17.342 13.3978 17.5 13 17.5C12.6022 17.5 12.2206 17.342 11.9393 17.0607C11.658 16.7794 11.5 16.3978 11.5 16C11.5 15.6022 11.658 15.2206 11.9393 14.9393C12.2206 14.658 12.6022 14.5 13 14.5Z" fill="#667085"/>
+</svg>

package/dist/components/ag-grid/AgGrid.js

@@ -13,6 +13,6 @@ const LicenceKey_1 = require("./LicenceKey");
 core_1.ModuleRegistry.registerModules([client_side_row_model_1.ClientSideRowModelModule, range_selection_1.RangeSelectionModule, infinite_row_model_1.InfiniteRowModelModule]);
 core_2.LicenseManager.setLicenseKey(LicenceKey_1.LICENSEKEY);
 const AgGrid = ({ style, gridOptions, onGridReady }) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ag-theme-quartz ", style: { height: style.height, width: style.width } }, { children: (0, jsx_runtime_1.jsx)(react_1.AgGridReact, Object.assign({ onGridReady: onGridReady, reactiveCustomComponents: true }, gridOptions)) })) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ag-theme-quartz ", style: { height: style.height, width: style.width } }, { children: (0, jsx_runtime_1.jsx)(react_1.AgGridReact, Object.assign({ onGridReady: onGridReady, reactiveCustomComponents: true }, gridOptions)) })) }));
 };
 exports.default = AgGrid;

package/dist/components/ag-grid/MyProvider.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.FeatureContext = (0, react_1.createContext)(null);
 function MyProvider({ children, value }) {
-    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords } = value;
+    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature } = value;
     // States for sort
     const [columnData] = (0, react_1.useState)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
     const [sortValue, setSortValue] = (0, react_1.useState)({});
@@ -18,17 +18,9 @@ function MyProvider({ children, value }) {
         // Returns based on length of filterQueries present
         return length === 0 ? [0] : Array.from({ length }, (_, index) => index);
     });
-    // Function call on click to
+    // Function call on click to refresh 
     const removeFeaturesAndRefresh = () => {
-        const emptyFeatures = {
-            searchedText: "",
-            filterQueries: [],
-            sort: {
-                isSortable: false,
-                columnToSort: {},
-                orderToSort: {},
-            },
-        };
+        const emptyFeatures = initialFeature;
         // Remove stored features
         setFeatureDetails(emptyFeatures);
         // Remove filter
@@ -52,7 +44,7 @@ function MyProvider({ children, value }) {
             columnData,
             callGrid,
             removeFeaturesAndRefresh,
-            totalRecords
+            totalRecords,
         } }, { children: children })));
 }
 exports.default = MyProvider;

package/dist/components/ag-grid/ParentForGrid.js

@@ -9,6 +9,7 @@ const grid_checkbox_1 = tslib_1.__importDefault(require("./grid-checkbox"));
 const MyProvider_1 = tslib_1.__importDefault(require("./MyProvider"));
 const error_ui_1 = tslib_1.__importDefault(require("./error-ui"));
 const constants_1 = require("./constants");
+require("./ag-grid.scss");
 function ParentForGrid(props) {
     const [gridData, setGridData] = (0, react_1.useState)({
         rowData: [],
@@ -23,12 +24,23 @@ function ParentForGrid(props) {
         rowData: [],
     });
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [checkBoxSelection, setCheckBoxSelection] = (0, react_1.useState)({
+    const [initialCheckBoxData] = (0, react_1.useState)({
         allBoxChecked: false,
         isInterminate: false,
         selectedCheckboxData: [],
         unselectedCheckboxData: [],
     });
+    const initialFeature = {
+        searchedText: "",
+        filterQueries: [],
+        sort: {
+            isSortable: false,
+            columnToSort: {},
+            orderToSort: {},
+        },
+        checkBoxSelection: initialCheckBoxData,
+        isRemoveClicked: false
+    };
     const [featureDetails, setFeatureDetails] = (0, react_1.useState)({
         searchedText: "",
         filterQueries: [],
@@ -37,12 +49,14 @@ function ParentForGrid(props) {
             columnToSort: {},
             orderToSort: {},
         },
+        checkBoxSelection: initialCheckBoxData,
+        isRemoveClicked: false
     });
     // Default column specification
     const defaultColDef = (0, react_1.useMemo)(() => {
         return {
             flex: 1,
-            minWidth: 100,
+            minWidth: 40,
             editable: false,
             filter: false,
             sortable: false,
@@ -50,36 +64,41 @@ function ParentForGrid(props) {
     }, []);
     // Function to handle checkbox click events
     const handleCheckboxClick = (rowData) => {
-        const { unselectedCheckboxData, selectedCheckboxData, allBoxChecked } = checkBoxSelection;
+        const { unselectedCheckboxData, selectedCheckboxData, allBoxChecked } = featureDetails.checkBoxSelection;
         if (allBoxChecked && unselectedCheckboxData.includes(rowData)) {
-            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { unselectedCheckboxData: unselectedCheckboxData.filter((item) => item !== rowData) }));
+            const checkboxData = Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { unselectedCheckboxData: unselectedCheckboxData.filter((item) => item !== rowData) });
+            setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
             return;
         }
         else if (allBoxChecked) {
-            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { unselectedCheckboxData: [...unselectedCheckboxData, rowData], isInterminate: true }));
+            const checkboxData = Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { unselectedCheckboxData: [...unselectedCheckboxData, rowData], isInterminate: true });
+            setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
             return;
         }
         // Logic to handle checkbox click events
         if (selectedCheckboxData.includes(rowData)) {
-            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { selectedCheckboxData: selectedCheckboxData.filter((item) => item !== rowData) }));
+            const checkboxData = Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { selectedCheckboxData: selectedCheckboxData.filter((item) => item !== rowData) });
+            setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
         }
         else {
-            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { selectedCheckboxData: [...selectedCheckboxData, rowData] }));
+            const checkboxData = Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { selectedCheckboxData: [...selectedCheckboxData, rowData] });
+            setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
         }
     };
     const handleHeaderCheckbox = () => {
-        const { allBoxChecked } = checkBoxSelection;
-        setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { allBoxChecked: !allBoxChecked, isInterminate: false, selectedCheckboxData: [], unselectedCheckboxData: [] }));
+        const { allBoxChecked } = featureDetails.checkBoxSelection;
+        const checkboxData = Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { allBoxChecked: !allBoxChecked, isInterminate: false, selectedCheckboxData: [], unselectedCheckboxData: [] });
+        setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
     };
     // JSX for rendering checkbox in header
     const headerCheckBoxRenderer = (params) => {
         const displayName = params === null || params === void 0 ? void 0 : params.displayName;
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { checked: checkBoxSelection.allBoxChecked, onChange: handleHeaderCheckbox, isInterminate: checkBoxSelection.isInterminate }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "px-3" }, { children: displayName }))] })));
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { checked: featureDetails.checkBoxSelection.allBoxChecked, onChange: handleHeaderCheckbox, isInterminate: featureDetails.checkBoxSelection.isInterminate }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "px-3" }, { children: displayName }))] })));
     };
     // JSX for rendering checkbox in cells
     const cellCheckBoxRenderer = (params) => {
         const { data } = params;
-        const { allBoxChecked, unselectedCheckboxData, selectedCheckboxData } = checkBoxSelection;
+        const { allBoxChecked, unselectedCheckboxData, selectedCheckboxData } = featureDetails.checkBoxSelection;
         return ((0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { checked: allBoxChecked
                 ? !unselectedCheckboxData.includes(data)
                 : selectedCheckboxData.includes(data), onChange: () => handleCheckboxClick(data), isInterminate: false }));
@@ -96,14 +115,20 @@ function ParentForGrid(props) {
             return emptyResponse; // If callback function to get row data is not provided
         }
         const response = yield props.getRowData(startRow, endRow, currentFeatures);
+        setGridData(Object.assign(Object.assign({}, gridData), { rowData: [] }));
+        setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: initialCheckBoxData }));
         // To identify when to stop the callBack
         // const actualEndRow = startRow + (response?.rowData?.length ?? 0);
         const actualEndRow = response === null || response === void 0 ? void 0 : response.totalRecords;
         if (response === null || response === void 0 ? void 0 : response.rowData) {
+            const result = {
+                rowData: response.rowData,
+                actualEndRow: actualEndRow,
+                totalRecords: response.totalRecords
+            };
             setTotalRecords(response === null || response === void 0 ? void 0 : response.totalRecords);
-            setGridData((prevState) => (Object.assign(Object.assign({}, prevState), { rowData: [...(prevState.rowData || []), ...response.rowData] })));
-            response.actualEndRow = actualEndRow;
-            return response;
+            // response.actualEndRow = actualEndRow;
+            return result;
         }
         return emptyResponse;
     });
@@ -119,6 +144,8 @@ function ParentForGrid(props) {
         if (props.rowModelType === constants_1.ROWMODELTYPE.CLIENT_SIDE) {
             const result = yield getData(0, 0, currentFeatures);
             if (result.rowData) {
+                setGridData(Object.assign(Object.assign({}, gridData), { rowData: result.rowData }));
+                params.api.setGridOption("rowData", []);
                 params.api.applyTransaction({ add: result.rowData });
             }
         }
@@ -144,10 +171,9 @@ function ParentForGrid(props) {
     // Get values when cell edited
     const getEditedColumn = (params) => {
         var _a;
-        console.log(params, 'edited column');
         const editedColumn = (_a = params === null || params === void 0 ? void 0 : params.colDef) === null || _a === void 0 ? void 0 : _a.field;
         const editedRow = params === null || params === void 0 ? void 0 : params.data;
-        console.log(editedRow, editedColumn, 'edited row ');
+        console.log(editedRow, editedColumn, "edited row ");
     };
     // Options that grid should have
     const gridOptions = {
@@ -169,9 +195,12 @@ function ParentForGrid(props) {
         onCellValueChanged: getEditedColumn,
         rowSelection: "multiple",
         suppressRowClickSelection: true,
-        rowHeight: 60,
+        rowHeight: constants_1.ROW_HEIGHT,
         rowModelType: props.rowModelType,
-        pinnedTopRowData: props === null || props === void 0 ? void 0 : props.pinnedTopRowData
+        pinnedTopRowData: props === null || props === void 0 ? void 0 : props.pinnedTopRowData,
+        cacheBlockSize: constants_1.BLOCK_SIZE,
+        maxBlocksInCache: constants_1.MAX_BLOCKS,
+        blockLoadDebounceMillis: constants_1.DEBOUNCE_INTERVAL, // Debounce for scroll
     };
     // Fucntion to call the grid
     const callGrid = (featureDetails) => {
@@ -184,21 +213,22 @@ function ParentForGrid(props) {
         }
     }, [featureDetails.searchedText]);
     // Remove all checkbox selection if any feature added
-    (0, react_1.useEffect)(() => {
-        setCheckBoxSelection({
-            allBoxChecked: false,
-            isInterminate: false,
-            selectedCheckboxData: [],
-            unselectedCheckboxData: [],
-        });
-    }, [featureDetails]);
-    console.log(isLoading, gridOptions, props === null || props === void 0 ? void 0 : props.pinnedTopRowData, 'is loading state');
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { height: style.height, width: style.width } }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(MyProvider_1.default, Object.assign({ value: {
+    // useEffect(() => {
+    //   setCheckBoxSelection({
+    //     allBoxChecked: false,
+    //     isInterminate: false,
+    //     selectedCheckboxData: [],
+    //     unselectedCheckboxData: [],
+    //   });
+    // }, [featureDetails]);
+    console.log(isLoading, gridOptions, props === null || props === void 0 ? void 0 : props.pinnedTopRowData, "is loading state");
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { height: "100%", width: style.width }, className: "ag-grid-container border-1 border-gray-200 border-round" }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MyProvider_1.default, Object.assign({ value: {
                                 featureDetails,
                                 setFeatureDetails,
                                 gridData,
                                 callGrid,
-                                totalRecords
+                                totalRecords,
+                                initialFeature
                             } }, { children: (0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props }) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady })] }) })) }) }));
 }
 exports.default = ParentForGrid;

package/dist/components/ag-grid/advancedFeature/advanced-feature.js

@@ -7,10 +7,13 @@ const custom_sort_1 = tslib_1.__importDefault(require("./custom-sort"));
 const record_detail_1 = tslib_1.__importDefault(require("./record-detail"));
 const filter_1 = tslib_1.__importDefault(require("./filter/filter"));
 const refresh_grid_1 = tslib_1.__importDefault(require("./refresh-grid"));
+const remove_items_1 = tslib_1.__importDefault(require("./remove-items"));
+// import HideColumn from "./hide-column"
+// import Grouping from "./grouping"
 // import { ConditionsToDisplay } from "../Types"
 function AdvancedFeatures({ props }) {
     const conditionsToDisplay = props === null || props === void 0 ? void 0 : props.conditionsToDisplay;
     // const {displayFilter,displaySearch,displayRefresh,displaySort} = conditionsToDisplay
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && (0, jsx_runtime_1.jsx)(global_search_1.default, { searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder }), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && (0, jsx_runtime_1.jsx)(filter_1.default, { callBackForSelect: props === null || props === void 0 ? void 0 : props.myInputData })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex " }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && (0, jsx_runtime_1.jsx)(refresh_grid_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), (0, jsx_runtime_1.jsx)(record_detail_1.default, {})] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && (0, jsx_runtime_1.jsx)(global_search_1.default, { searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder }), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && (0, jsx_runtime_1.jsx)(filter_1.default, { callBackForSelect: props === null || props === void 0 ? void 0 : props.myInputData })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRemoveItems) && (0, jsx_runtime_1.jsx)(remove_items_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && (0, jsx_runtime_1.jsx)(refresh_grid_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), (0, jsx_runtime_1.jsx)(record_detail_1.default, {})] }))] })));
 }
 exports.default = AdvancedFeatures;

package/dist/components/ag-grid/advancedFeature/custom-sort.js

@@ -64,20 +64,23 @@ function Sort() {
     // Trigger action to clear
     const clearSort = (e) => {
         onClickSort(e);
-        setSortBy(null);
-        setSortValue(null);
+        setSortBy({});
+        setSortValue({});
         const sortDetails = {
             isSortable: false,
             columnToSort: "",
             orderToSort: "",
         };
-        setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { sort: sortDetails }));
+        const currentFeatureDetails = Object.assign({}, featureDetails);
+        currentFeatureDetails.sort = sortDetails;
+        setFeatureDetails(currentFeatureDetails);
+        callGrid(currentFeatureDetails);
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer p-1 sc_icon_hover flex align-items-center border-round-lg ${isOverlayOpened || featureDetails.sort.isSortable
                     ? "bg-primary-50"
-                    : ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 px-1" }, { children: ` Selected` }))), (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (event) => onClickSort(event) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 20, color: isOverlayOpened || featureDetails.sort.isSortable
+                    : ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 px-1" }, { children: ` Selected` }))), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, onClick: (event) => onClickSort(event), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 20, color: isOverlayOpened || featureDetails.sort.isSortable
                                 ? "#243DC6"
-                                : "#667085" }) }))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold  line-height-3 text-gray-900" }, { children: "Column Sorting" })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "m-0" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
+                                : "#667085" }) })] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold  line-height-3 text-gray-900" }, { children: "Column Sorting" })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "m-0" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
                             if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
                                 const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
                                 return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `${isSelected && "bg-primary-25"} cursor-pointer border-round-md flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700`, style: { listStyleType: "none" }, onClick: () => onSelectSortValue(eachColumn) }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { id: "tableSort", checked: isSelected, type: "circle", value: sortValue }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));

package/dist/components/ag-grid/advancedFeature/filter/filter.js

@@ -8,10 +8,20 @@ const react_1 = require("react");
 const overlaypanel_1 = require("primereact/overlaypanel");
 const querty_1 = tslib_1.__importDefault(require("./querty"));
 const MyProvider_1 = require("../../MyProvider");
+const columns = [{ hederName: "title" }, { hederName: "gender" }];
+const data2 = columns.map((col, idx) => {
+    let object = {
+        key: idx,
+        label: col.hederName,
+    };
+    return object;
+});
+console.log(data2, "data for tree");
 function FilterParent({ callBackForSelect }) {
-    var _a;
+    var _a, _b;
     const filterRef = (0, react_1.useRef)(null);
-    const { columnData, featureDetails, setFeatureDetails, callGrid, queries, setQueries } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
+    const { columnData, featureDetails, setFeatureDetails, callGrid, queries, setQueries, } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
+    console.log(data2, "data in reee");
     // Filter header
     const BulkActionHeader = (props) => {
         const { header: { label, description }, } = props;
@@ -27,7 +37,10 @@ function FilterParent({ callBackForSelect }) {
         filterRef.current.toggle(false);
         // setQueryCount(1)
         setQueries([0]);
-        emptyFilterQuries();
+        const currentFeatureDetails = Object.assign({}, featureDetails);
+        currentFeatureDetails.filterQueries = [];
+        setFeatureDetails(currentFeatureDetails);
+        callGrid(currentFeatureDetails);
     };
     // Toggle the pop display
     const togglePopup = (e) => {
@@ -35,10 +48,6 @@ function FilterParent({ callBackForSelect }) {
         (_a = filterRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e);
         // setQueryCount(1)
     };
-    // Empty filterQuries
-    const emptyFilterQuries = () => {
-        setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: [] }));
-    };
     // OnClick to +
     const actionOnPlus = () => {
         // setQueryCount((prevCount) => prevCount + 1);
@@ -47,7 +56,7 @@ function FilterParent({ callBackForSelect }) {
         updatedQureis.push(addLength);
         setQueries(updatedQureis);
     };
-    // OnClick to - 
+    // OnClick to -
     const actionOnMinus = (index) => {
         var _a;
         const filterQuries = (_a = featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.filter((query) => query.idx !== index);
@@ -82,7 +91,9 @@ function FilterParent({ callBackForSelect }) {
         callGrid(featureDetails);
         filterRef.current.toggle(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "hover:bg-primary-25 ml-2", onClick: (e) => { togglePopup(e); } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines" }) })), (0, jsx_runtime_1.jsxs)("button", Object.assign({ className: "bg-white", onClick: resettingFilters }, { children: ["Selected ", (_a = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.length] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: filterRef, className: "w-45rem bulk-action-feature" }, { children: [(0, jsx_runtime_1.jsx)(BulkActionHeader, { header: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_a = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 border-round flex align-items-center mx-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: `${true && "font-semibold"} bg-transparent pr-0`, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines" }) }, { children: ((_b = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.filterQueries) === null || _b === void 0 ? void 0 : _b.length) + " Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, onClick: resettingFilters, className: "h-40 text-primary-400 bg-transparent", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close" }) })] }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "hover:bg-primary-25 ml-2", onClick: (e) => {
+                    togglePopup(e);
+                }, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines" }) })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: filterRef, className: "w-45rem bulk-action-feature" }, { children: [(0, jsx_runtime_1.jsx)(BulkActionHeader, { header: {
                             label: "Filters",
                             description: "Streamline your search with filter",
                         } }), RenderQuery(), (0, jsx_runtime_1.jsx)(BulkActionFooter, { footer: {

package/dist/components/ag-grid/advancedFeature/filter/querty.js

@@ -11,6 +11,7 @@ const Types_1 = require("../../Types");
 const inputnumber_1 = require("primereact/inputnumber");
 const calendar_1 = require("primereact/calendar");
 const multiselect_1 = require("primereact/multiselect");
+const inputtext_1 = require("primereact/inputtext");
 function Querty({ currentIndex, queryIndex, columnData, featureDetails, setFeatureDetails, callBackForSelect, actionOnMinus, actionOnPlus, defaultFilterValue, }) {
     var _a, _b, _c;
     const [filterOperations, setFilterOperations] = (0, react_1.useState)([]);
@@ -55,7 +56,7 @@ function Querty({ currentIndex, queryIndex, columnData, featureDetails, setFeatu
     const renderUIElement = (type, value, onChange, options) => {
         switch (type) {
             case Types_1.ATTRIBUTEDATATYPES.STRING:
-                return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value) }));
+                return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: value, className: "border-noround", onChange: (e) => onChange(e.target.value) }));
             case Types_1.ATTRIBUTEDATATYPES.DATE:
                 return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { value: value, onChange: (e) => onChange(e.value), showIcon: true }));
             case Types_1.ATTRIBUTEDATATYPES.INTEGER:

package/dist/components/ag-grid/advancedFeature/global-search.js

@@ -6,14 +6,18 @@ const inputtext_1 = require("primereact/inputtext");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
 const react_1 = require("react");
 const MyProvider_1 = require("../MyProvider");
+const hooks_1 = require("primereact/hooks");
 // import { useState } from "react";
 function Search({ searchPlaceHolder }) {
     const { featureDetails, setFeatureDetails } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
+    const [inputValue, deboucedValue, setInputValue] = (0, hooks_1.useDebounce)("", 500);
+    (0, react_1.useEffect)(() => {
+        setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: deboucedValue }));
+    }, [deboucedValue]);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-left ${featureDetails.searchedText.length > 0 && "p-input-icon-right"}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18 }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer", onClick: () => {
                         setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" }));
-                        //   setInputValue("");
-                    }, title: "Clear" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) }))), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: featureDetails.searchedText, onChange: (e) => {
-                        setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: e.target.value }));
-                    }, className: "w-21rem", placeholder: searchPlaceHolder || "search by name or code" })] })) }));
+                    }, title: "Clear" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) }))), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: inputValue, onChange: (e) => setInputValue(e.target.value), 
+                    // onChange={(e) => updateSearchText(e.target.value)}
+                    className: "w-21rem", placeholder: searchPlaceHolder || "search by name or code" })] })) }));
 }
 exports.default = Search;

package/dist/components/ag-grid/advancedFeature/grouping.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtext_1 = require("primereact/inputtext");
+const tree_1 = require("primereact/tree");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
+const react_1 = require("react");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const checkbox_1 = require("primereact/checkbox");
+function Grouping() {
+    const columns = [{ hederName: "title" }, { hederName: "gender" }];
+    const data2 = columns.map((col, idx) => {
+        let object = {
+            key: idx,
+            label: col.hederName,
+        };
+        return object;
+    });
+    const columnGroupRef = (0, react_1.useRef)(null);
+    const [nodes, setNodes] = (0, react_1.useState)(data2 || []);
+    const [checked, setChecked] = (0, react_1.useState)(false);
+    const togglerTemplate = (node) => {
+        if (!node) {
+            return false;
+        }
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center mr-3" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "drag-and-drop" }) }) })));
+    };
+    // column group functions
+    const nodeTemplate = (node) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-center w-full border-round block w-full p-3 text-primary-400 font-semibold ${checked && "bg-primary-25"}` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => setChecked(e.checked), checked: checked }), (0, jsx_runtime_1.jsx)("span", { children: node.label })] })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "h-40 text-primary-400", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01" }), onClick: (e) => columnGroupRef.current.toggle(e) }), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column_group_overlay w-20rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0" }, { children: "Select any 2 grouping options only" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 border-bottom-1 border-top-1 border-gray-200 bg-gray-50" }, { children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: "Search by column or attribute name", className: "w-full" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: nodes, nodeTemplate: nodeTemplate, dragdropScope: "demo", onDragDrop: (e) => setNodes(e.value), togglerTemplate: togglerTemplate, className: "list-items" }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 border-top-1 border-gray-200 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, label: "Remove Grouping" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Save Grouping", disabled: true })] }))] }))] }));
+}
+exports.default = Grouping;

package/dist/components/ag-grid/advancedFeature/hide-column.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
+const react_1 = require("react");
+const sidebar_1 = require("primereact/sidebar");
+const inputswitch_1 = require("primereact/inputswitch");
+const inputtext_1 = require("primereact/inputtext");
+const tree_1 = require("primereact/tree");
+const columns = [{ hederName: "Media" }, { hederName: "Product Name" }, { hederName: "Product Code" }, { hederName: "Product Description" }, { hederName: "Price" }, { hederName: "Brand" }];
+const data2 = columns.map((col, idx) => {
+    let object = {
+        key: idx,
+        label: col.hederName,
+    };
+    return object;
+});
+function HideColumn() {
+    const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
+    const [checked, setChecked] = (0, react_1.useState)(false);
+    const [inpValue, setInpValue] = (0, react_1.useState)("");
+    const [checkedStates, setCheckedStates] = (0, react_1.useState)({});
+    const [nodes, setNodes] = (0, react_1.useState)(data2 || []);
+    const handleSwitchChange = (id, value) => {
+        setCheckedStates((prevState) => (Object.assign(Object.assign({}, prevState), { [id]: value })));
+    };
+    // column group functions
+    const nodeTemplate = (node) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center w-full border-round block w-full p-3 pr-0 text-primary-400 font-semibold justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: node.label }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: checkedStates[node.id] || false, onChange: (e) => handleSwitchChange(node.id, e.value) })] })));
+    };
+    const togglerTemplate = (node) => {
+        if (!node) {
+            return false;
+        }
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "drag-and-drop" }) }) })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true), className: "mr-3", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02" }) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-3", visible: visibleRight, position: "right", onHide: () => setVisibleRight(false) }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between px-4 py-2 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Configure Columns" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, label: "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Update", disabled: true })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-3 py-2" }, { children: [(0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: "flex align-items-center justify-content-between my-0" }, { children: ["Apply to all views", (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: checked, onChange: (e) => setChecked(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm" }, { children: "Apply the chosen column selection to all available views" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "py-2" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", value: inpValue, onChange: (e) => {
+                                                setInpValue(e.target.value);
+                                            }, disabled: false, placeholder: "Search by column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })) })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "py-2 my-0 text-gray-900 text-lg font-medium border-bottom-1 border-gray-200" }, { children: ["Selected Attributes", " ", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-500 text-sm" }, { children: "(10/15)" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: nodes, nodeTemplate: nodeTemplate, dragdropScope: "demo", onDragDrop: (e) => setNodes(e.value), togglerTemplate: togglerTemplate, className: "list-items" }) })), (0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "mt-6 mb-0 pb-2 border-bottom-1 border-gray-200" }, { children: "Unselected Attributes" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 &&
+                                    nodes.map((listItem) => ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: listItem.label }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: checkedStates[listItem.id] || false, onChange: (e) => handleSwitchChange(listItem.id, e.value) })] }), listItem.id))) }))] }))] }))] }));
+}
+exports.default = HideColumn;

package/dist/components/ag-grid/advancedFeature/refresh-grid.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const MyProvider_1 = require("../MyProvider");
+const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
+const button_1 = require("primereact/button");
 function RefreshGrid() {
     const { removeFeaturesAndRefresh } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: removeFeaturesAndRefresh, className: "bg-white" }, { children: "Refresh" })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, onClick: removeFeaturesAndRefresh, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01" }) }) }));
 }
 exports.default = RefreshGrid;

package/dist/components/ag-grid/advancedFeature/remove-items.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MyProvider_1 = require("../MyProvider");
+function RemoveItems() {
+    const { featureDetails, callGrid } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
+    const removeItemsCallBack = () => {
+        const currentFeature = Object.assign({}, featureDetails);
+        currentFeature.isRemoveClicked = true;
+        callGrid(currentFeature);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: removeItemsCallBack }, { children: "-" })) }));
+}
+exports.default = RemoveItems;

package/dist/components/ag-grid/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ROWMODELTYPE = exports.conditionsList = exports.COLUMN_SORT_OPTIONS = void 0;
+exports.ROW_HEIGHT = exports.DEBOUNCE_INTERVAL = exports.MAX_BLOCKS = exports.BLOCK_SIZE = exports.ROWMODELTYPE = exports.conditionsList = exports.COLUMN_SORT_OPTIONS = void 0;
 const Types_1 = require("./Types");
 exports.COLUMN_SORT_OPTIONS = [
     { id: 1, label: "Low - High", sortId: 1, dataType: Types_1.ATTRIBUTEDATATYPES.INTEGER },
@@ -42,3 +42,7 @@ exports.ROWMODELTYPE = {
     SERVER_SIDE: "serverSide",
     CLIENT_SIDE: "clientSide",
 };
+exports.BLOCK_SIZE = 100;
+exports.MAX_BLOCKS = 2;
+exports.DEBOUNCE_INTERVAL = 200;
+exports.ROW_HEIGHT = 60;

package/dist/components/ag-grid/grid-checkbox.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Checkbox = ({ checked, onChange, isInterminate }) => {
+const GridCheckBOx = ({ checked, onChange, isInterminate }) => {
     console.log(isInterminate, 'is interminat status in checkbox');
     return ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: checked, onChange: onChange }));
 };
-exports.default = Checkbox;
+exports.default = GridCheckBOx;

package/dist/directives/svg-icons.js

@@ -9074,6 +9074,18 @@ exports.iconList = [
         svg: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
     <path d="M11.1654 3.375L5.4362 9.10417L2.83203 6.5" stroke="white" stroke-width="2.08333" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>`,
+    },
+    {
+        name: "drag-and-drop",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 2.5C7.39782 2.5 7.77936 2.65804 8.06066 2.93934C8.34196 3.22064 8.5 3.60218 8.5 4C8.5 4.39782 8.34196 4.77936 8.06066 5.06066C7.77936 5.34196 7.39782 5.5 7 5.5C6.60218 5.5 6.22064 5.34196 5.93934 5.06066C5.65804 4.77936 5.5 4.39782 5.5 4C5.5 3.60218 5.65804 3.22064 5.93934 2.93934C6.22064 2.65804 6.60218 2.5 7 2.5Z" fill="#667085"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2.5C13.3978 2.5 13.7794 2.65804 14.0607 2.93934C14.342 3.22064 14.5 3.60218 14.5 4C14.5 4.39782 14.342 4.77936 14.0607 5.06066C13.7794 5.34196 13.3978 5.5 13 5.5C12.6022 5.5 12.2206 5.34196 11.9393 5.06066C11.658 4.77936 11.5 4.39782 11.5 4C11.5 3.60218 11.658 3.22064 11.9393 2.93934C12.2206 2.65804 12.6022 2.5 13 2.5Z" fill="#667085"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 8.5C7.39782 8.5 7.77936 8.65804 8.06066 8.93934C8.34196 9.22064 8.5 9.60218 8.5 10C8.5 10.3978 8.34196 10.7794 8.06066 11.0607C7.77936 11.342 7.39782 11.5 7 11.5C6.60218 11.5 6.22064 11.342 5.93934 11.0607C5.65804 10.7794 5.5 10.3978 5.5 10C5.5 9.60218 5.65804 9.22064 5.93934 8.93934C6.22064 8.65804 6.60218 8.5 7 8.5Z" fill="#667085"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.5C13.3978 8.5 13.7794 8.65804 14.0607 8.93934C14.342 9.22064 14.5 9.60218 14.5 10C14.5 10.3978 14.342 10.7794 14.0607 11.0607C13.7794 11.342 13.3978 11.5 13 11.5C12.6022 11.5 12.2206 11.342 11.9393 11.0607C11.658 10.7794 11.5 10.3978 11.5 10C11.5 9.60218 11.658 9.22064 11.9393 8.93934C12.2206 8.65804 12.6022 8.5 13 8.5Z" fill="#667085"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14.5C7.39782 14.5 7.77936 14.658 8.06066 14.9393C8.34196 15.2206 8.5 15.6022 8.5 16C8.5 16.3978 8.34196 16.7794 8.06066 17.0607C7.77936 17.342 7.39782 17.5 7 17.5C6.60218 17.5 6.22064 17.342 5.93934 17.0607C5.65804 16.7794 5.5 16.3978 5.5 16C5.5 15.6022 5.65804 15.2206 5.93934 14.9393C6.22064 14.658 6.60218 14.5 7 14.5Z" fill="#667085"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13 14.5C13.3978 14.5 13.7794 14.658 14.0607 14.9393C14.342 15.2206 14.5 15.6022 14.5 16C14.5 16.3978 14.342 16.7794 14.0607 17.0607C13.7794 17.342 13.3978 17.5 13 17.5C12.6022 17.5 12.2206 17.342 11.9393 17.0607C11.658 16.7794 11.5 16.3978 11.5 16C11.5 15.6022 11.658 15.2206 11.9393 14.9393C12.2206 14.658 12.6022 14.5 13 14.5Z" fill="#667085"/>
+    </svg>
+    `,
     },
     {
         name: "check-circle-remove",

package/dist/types/components/ag-grid/MyProvider.d.ts

@@ -8,6 +8,7 @@ interface MyProviderProps {
         gridData: GridData;
         callGrid: (featureDetails: Features) => void;
         totalRecords: number;
+        initialFeature: Features;
     };
 }
 declare function MyProvider({ children, value }: MyProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ag-grid/ParentForGrid.d.ts

@@ -1,2 +1,3 @@
+import "./ag-grid.scss";
 declare function ParentForGrid(props: any): import("react/jsx-runtime").JSX.Element;
 export default ParentForGrid;

package/dist/types/components/ag-grid/Types.d.ts

@@ -57,6 +57,8 @@ export interface Features {
     searchedText: string;
     filterQueries: Filter[] | [];
     sort: Sort;
+    checkBoxSelection: CheckBoxSelection;
+    isRemoveClicked: boolean;
 }
 export interface ParentProp {
 }
@@ -84,10 +86,13 @@ export interface GridData {
     columnData: ColumnDef[];
 }
 export interface ConditionsToDisplay {
-    displayFilter: boolean;
-    displaySort: boolean;
-    displaySearch: boolean;
-    displayRefresh: boolean;
+    displayFilter?: boolean;
+    displaySort?: boolean;
+    displaySearch?: boolean;
+    displayRefresh?: boolean;
+    displayRemoveItems?: boolean;
+    displayGrouping?: boolean;
+    displayColumnHide?: boolean;
 }
 export interface PropsFromProduct {
     columnData: ColumnDef[];
@@ -99,5 +104,9 @@ export interface PropsFromProduct {
 export interface ResoponseFromCallback {
     totalRecords: number;
     rowData: any[];
+}
+export interface ResponseFromApi {
+    totalRecords: number;
+    rowData: any[];
     actualEndRow?: number;
 }

package/dist/types/components/ag-grid/advancedFeature/grouping.d.ts

@@ -0,0 +1,2 @@
+declare function Grouping(): import("react/jsx-runtime").JSX.Element;
+export default Grouping;

package/dist/types/components/ag-grid/advancedFeature/hide-column.d.ts

@@ -0,0 +1,2 @@
+declare function HideColumn(): import("react/jsx-runtime").JSX.Element;
+export default HideColumn;

package/dist/types/components/ag-grid/advancedFeature/remove-items.d.ts

@@ -0,0 +1,2 @@
+declare function RemoveItems(): import("react/jsx-runtime").JSX.Element;
+export default RemoveItems;

package/dist/types/components/ag-grid/constants.d.ts

@@ -6,3 +6,7 @@ export declare const ROWMODELTYPE: {
     SERVER_SIDE: string;
     CLIENT_SIDE: string;
 };
+export declare const BLOCK_SIZE = 100;
+export declare const MAX_BLOCKS = 2;
+export declare const DEBOUNCE_INTERVAL = 200;
+export declare const ROW_HEIGHT = 60;

package/dist/types/components/ag-grid/grid-checkbox.d.ts

@@ -4,5 +4,5 @@ interface CheckboxProps {
     onChange: () => void;
     isInterminate: boolean;
 }
-declare const Checkbox: React.FC<CheckboxProps>;
-export default Checkbox;
+declare const GridCheckBOx: React.FC<CheckboxProps>;
+export default GridCheckBOx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "5.8.7",
+  "version": "5.8.9",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",