sccoreui 5.9.84 → 5.9.86

package/dist/assets/App34.scss

@@ -0,0 +1,130 @@
+@import url("./assets/theme.css");
+@import url("./assets/sccoreui.css");
+@import url("./assets/sccoreicons.css");
+@import url("./assets/flex.css");
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
+
+:root {
+  --fw-600: 600;
+  --fw-400: 400;
+  --fs-24: 24px;
+  --fs-18: 18px;
+  --fs-16: 16px;
+  --lh: 24px;
+  --fs-14: 14px;
+  --grey-bg: #101828;
+  --border-none: border-none;
+}
+
+// @font-face {
+//   font-family: "Lato";
+//   src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
+// }
+
+// @font-face {
+//   font-family: "Lato-600";
+//   font-weight: 600;
+//   src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
+// }
+
+// * {
+//   padding: 0;
+//   margin: 0;
+// }
+
+body {
+  font-family: 'Lato', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: var(--lh);
+  padding: 0;
+  margin: 0;
+}
+
+code {
+  font-family: 'Lato', sans-serif;
+}
+
+h1 {
+  font-size: var(--fs-24);
+  font-weight: var(--fw-600);
+}
+
+h2 {
+  font-size: var(--fs-18);
+  font-weight: var(--fw-600);
+}
+
+h3 {
+  font-size: var(--fs-16);
+  font-weight: var(--fw-400);
+}
+
+// ============= custom progress steps ===============  //
+
+.progress-container {
+  isolation: isolate;
+
+  &::before {
+    content: "";
+    background-color: var(--gray-200);
+    position: absolute;
+    z-index: -1;
+  }
+
+  &.horizontal::before {
+    height: 2px;
+    width: 100%;
+    top: 11%;
+  }
+
+  &.vertical::before {
+    height: 100%;
+    width: 2px;
+    left: 5%;
+    top: 0;
+  }
+}
+
+.progressbar {
+  z-index: -1;
+  transition: all 0.6s ease;
+
+  &.horizontal {
+    left: 0;
+    height: 2px;
+    top: 11%;
+  }
+
+  &.vertical {
+    width: 2px;
+    left: 5%;
+    top: 0;
+  }
+}
+
+.progress-step-item {
+  &.horizontal {
+    // transform: translateX(10%);
+
+    &:nth-of-type(1) {
+      transform: translateX(-50%);
+    }
+
+    &:last-child {
+      transform: translateX(50%);
+    }
+  }
+
+  &.vertical {
+    transform: translateY(50%);
+
+    &:nth-of-type(1) {
+      transform: translateY(-5%);
+    }
+
+    &:last-child {
+      transform: translateY(100%);
+    }
+  }
+}

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

@@ -15,7 +15,7 @@ function AdvancedFeatures({ props }) {
     const { featureDetails } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const conditionsToDisplay = props === null || props === void 0 ? void 0 : props.conditionsToDisplay;
     const { bulkActionComponent: BulkAction } = props;
-    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 gap-3" }, { 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)(table_filter_1.default, {})] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(hide_column_1.default, {}), (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.displayBulkAction) &&
+    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 gap-3" }, { 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)(table_filter_1.default, {})] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && (0, jsx_runtime_1.jsx)(hide_column_1.default, {}), (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.displayBulkAction) &&
                         (props === null || props === void 0 ? void 0 : props.bulkActionComponent) && ((0, jsx_runtime_1.jsx)(BulkAction, { checkBoxSelection: featureDetails.checkBoxSelection })), (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/hide-column.js

@@ -10,60 +10,142 @@ const inputswitch_1 = require("primereact/inputswitch");
 const inputtext_1 = require("primereact/inputtext");
 const context_provider_1 = require("../context-provider");
 function HideColumn() {
-    const { gridData, gridApi } = (0, react_1.useContext)(context_provider_1.FeatureContext);
+    const { gridData, gridApi, updateColumnsForGrid } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
     const [checked, setChecked] = (0, react_1.useState)(false);
-    const [inpValue, setInpValue] = (0, react_1.useState)("");
-    const [nodes, setNodes] = (0, react_1.useState)(() => {
+    // const [inpValue, setInpValue] = useState<string>("");
+    const [storeNodes, setStoreNodes] = (0, react_1.useState)();
+    const [nodes, setNodes] = (0, react_1.useState)();
+    const assignInitialValues = () => {
         var _a;
         const columnsInBar = [];
         (_a = JSON.parse(JSON.stringify(gridData === null || gridData === void 0 ? void 0 : gridData.columnData))) === null || _a === void 0 ? void 0 : _a.map((column) => {
-            if ((column === null || column === void 0 ? void 0 : column.headerName) && (column === null || column === void 0 ? void 0 : column.field)) {
+            if (column === null || column === void 0 ? void 0 : column.visibleInPanel) {
                 column.checked = !(column === null || column === void 0 ? void 0 : column.hide);
+                if (column.hide) {
+                    column.selected = false;
+                    column.unSelected = true;
+                }
+                else {
+                    column.selected = true;
+                    column.unSelected = false;
+                }
             }
             columnsInBar.push(column);
         });
-        return columnsInBar;
-    });
+        setNodes(columnsInBar);
+        setStoreNodes(columnsInBar);
+    };
+    // Display search columns
+    const searchHandler = (text) => {
+        const searchedColumns = [];
+        storeNodes.filter((column) => {
+            var _a;
+            if (column === null || column === void 0 ? void 0 : column.visibleInPanel) {
+                if ((_a = column === null || column === void 0 ? void 0 : column.headerName) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(text.toLowerCase())) {
+                    searchedColumns.push(column);
+                }
+            }
+        });
+        setNodes(searchedColumns);
+    };
     // When radio button is switched
     const handleSwitchChange = (selectedColumn, value) => {
-        console.log(selectedColumn, value, 'selected column');
-        const updatedColumns = [...nodes];
+        const updatedColumns = [...storeNodes];
         updatedColumns === null || updatedColumns === void 0 ? void 0 : updatedColumns.map((column) => {
             if ((column === null || column === void 0 ? void 0 : column.id) === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.id)) {
                 column.checked = value;
             }
             return column;
         });
-        setNodes(updatedColumns);
+        // setNodes(updatedColumns)
+        setStoreNodes(updatedColumns);
     };
+    // Return columns needs to hide
     const updateColumns = () => {
-        const columnsToHide = nodes.filter((col) => {
-            return col.hasOwnProperty("checked") && !col.checked;
+        const columnsToHide = storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((col) => col.hasOwnProperty("checked") && !col.checked);
+        const updatedNodes = storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.map((node, idx) => {
+            const newSeq = idx + 1;
+            if (node.seq !== newSeq) {
+                node.seq = newSeq;
+            }
+            if (node.hasOwnProperty("checked")) {
+                node.selected = node.checked;
+                node.unSelected = !node.checked;
+            }
+            return node;
         });
-        hideColumns(columnsToHide);
+        setNodes(updatedNodes);
+        setStoreNodes(updatedNodes);
+        hideColumns(columnsToHide, updatedNodes);
         setVisibleRight(false);
     };
-    const hideColumns = (columnsToHide) => {
+    // Hide columns from grid
+    const hideColumns = (columnsToHide, updatedSeq) => {
         if (!gridApi)
             return;
-        const columnDefs = gridApi.current.api.getColumnDefs();
+        const columnDefs = JSON.parse(JSON.stringify(gridData.columnData));
         const updatedColumnDefs = columnDefs.map((colDef) => {
             const colToHide = columnsToHide.find((col) => col.id === colDef.id);
-            if (colToHide) {
-                colDef.hide = true; // or colDef.hide = !!colToHide.checked; if using checked property
-            }
-            else {
-                colDef.hide = false; // ensure other columns are not hidden
+            colDef.hide = !!colToHide;
+            const updatedCol = updatedSeq.find((col) => col.id === colDef.id);
+            if (updatedCol) {
+                colDef.seq = updatedCol.seq;
             }
             return colDef;
         });
-        gridApi.current.api.setColumnDefs(updatedColumnDefs);
+        updateColumnsForGrid(updatedColumnDefs);
+    };
+    // When drag started
+    const handleDragStart = (index) => (event) => {
+        event.dataTransfer.setData("text/plain", index);
+    };
+    // When selected item dropped
+    const handleDrop = (index) => (event) => {
+        event.preventDefault();
+        const draggedIndex = event.dataTransfer.getData("text");
+        if (draggedIndex !== index.toString()) {
+            const updatedColumns = [...storeNodes];
+            const [draggedItem] = updatedColumns.splice(draggedIndex, 1);
+            console.log(draggedItem, 'dragged item', draggedIndex);
+            updatedColumns.splice(index, 0, draggedItem);
+            console.log(updatedColumns, draggedIndex, draggedItem, 'data of dragging');
+            for (let i = 0; i < updatedColumns.length; i++) {
+                const currentColumn = updatedColumns[i];
+                console.log(i, currentColumn, 'columns in loop');
+            }
+            setNodes(updatedColumns);
+            setStoreNodes(updatedColumns);
+        }
+    };
+    // When drag is completed 
+    const handleDragOver = (event) => {
+        event.preventDefault();
     };
-    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", onClick: () => updateColumns() })] }))] })), (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)("ul", Object.assign({ className: "list-none p-0 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 &&
-                                        nodes.map((listItem, idx) => (!(listItem === null || listItem === void 0 ? void 0 : listItem.hide) && (listItem === null || listItem === void 0 ? void 0 : listItem.field) && (listItem === null || listItem === void 0 ? void 0 : listItem.headerName)) && (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.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem === null || listItem === void 0 ? void 0 : listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), idx)) })) })), (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) => ((listItem === null || listItem === void 0 ? void 0 : listItem.hide) && (listItem === null || listItem === void 0 ? void 0 : listItem.headerName)) && (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.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), listItem.id)) }))] }))] }))] }));
+    (0, react_1.useEffect)(() => {
+        assignInitialValues();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!visibleRight && (storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.length)) {
+            const fixNodes = [...storeNodes].map((node) => {
+                if ((node === null || node === void 0 ? void 0 : node.checked) !== (node === null || node === void 0 ? void 0 : node.selected)) {
+                    node.checked = node.selected;
+                }
+                return node;
+            });
+            console.log(storeNodes, "store nodes in use effect");
+            setNodes(fixNodes);
+            setStoreNodes(fixNodes);
+        }
+    }, [visibleRight]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true), text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", size: 20 }) }), (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", onClick: () => setVisibleRight(false) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Update", onClick: () => updateColumns() })] }))] })), (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) => {
+                                                searchHandler(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.jsxs)("span", Object.assign({ className: "text-gray-500 text-sm" }, { children: [nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.selected).length, "/", nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.unSelected || node.selected).length] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (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 === null || nodes === void 0 ? void 0 : nodes.map((listItem, idx) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
+                                            (listItem === null || listItem === void 0 ? void 0 : listItem.selected) && ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3", draggable: true, onDragStart: handleDragStart(idx), onDrop: handleDrop(idx), onDragOver: handleDragOver }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ role: "img", "aria-label": "drag icon", className: "cursor-pointer" }, { children: "\uD83D\uDCE6" })), (0, jsx_runtime_1.jsx)("span", { children: listItem.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem === null || listItem === void 0 ? void 0 : listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), idx)))) })) })), (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 === null || nodes === void 0 ? void 0 : nodes.map((listItem) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
+                                        (listItem === null || listItem === void 0 ? void 0 : listItem.unSelected) && ((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.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), listItem.id)))) }))] }))] }))] }));
 }
 exports.default = HideColumn;

package/dist/components/ag-grid/context-provider.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const helper_1 = require("./helper");
 exports.FeatureContext = (0, react_1.createContext)(null);
 function MyProvider({ children, value }) {
-    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sortOptions, filterConditions, clearFilters, setGridData, gridApi, } = value;
+    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sortOptions, filterConditions, clearFilters, setGridData, gridApi, updateColumnsForGrid } = 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)({});
@@ -89,6 +89,7 @@ function MyProvider({ children, value }) {
             setGridData,
             gridData,
             gridApi,
+            updateColumnsForGrid
         } }, { children: children })));
 }
 exports.default = MyProvider;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseIfNeeded = exports.applyDefaultFilters = void 0;
+exports.sortColumns = exports.parseIfNeeded = exports.applyDefaultFilters = void 0;
 const applyDefaultFilters = (defaultFilters) => {
     console.log(defaultFilters, 'deafult filters');
     const filters = defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.map((item) => {
@@ -33,3 +33,14 @@ const parseIfNeeded = (value) => {
     }
 };
 exports.parseIfNeeded = parseIfNeeded;
+const sortColumns = (columns) => {
+    const sortedColumns = columns === null || columns === void 0 ? void 0 : columns.sort((a, b) => {
+        if (!a.seq)
+            return 1;
+        if (!b.seq)
+            return -1;
+        return a.seq - b.seq;
+    });
+    return sortedColumns;
+};
+exports.sortColumns = sortColumns;

package/dist/components/ag-grid/parent-for-grid.js

@@ -15,7 +15,7 @@ function ParentForGrid(props) {
     var _a, _b, _c, _d;
     const [gridData, setGridData] = (0, react_1.useState)({
         rowData: [],
-        columnData: props === null || props === void 0 ? void 0 : props.columnData,
+        columnData: (0, helper_1.sortColumns)(props === null || props === void 0 ? void 0 : props.columnData)
     });
     const [style] = (0, react_1.useState)(props.style);
     const [api, setApi] = (0, react_1.useState)(null);
@@ -188,6 +188,7 @@ function ParentForGrid(props) {
                     }
                 }),
             };
+            setGridData(Object.assign(Object.assign({}, gridData), { columnData: props === null || props === void 0 ? void 0 : props.columnData }));
             params.api.setGridOption("datasource", dataSource);
         }
     });
@@ -249,6 +250,23 @@ function ParentForGrid(props) {
             callBackForCheckedRows(featureDetails);
         }
     }, [featureDetails]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const existingColumns = (_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.api) === null || _a === void 0 ? void 0 : _a.getColumnDefs();
+        if (!(props === null || props === void 0 ? void 0 : props.columnData) || !existingColumns)
+            return;
+        const columnFromProps = (0, helper_1.sortColumns)(props === null || props === void 0 ? void 0 : props.columnData);
+        const updatedColumnDefs = existingColumns.map((colDef) => {
+            columnFromProps.find((col) => {
+                if (col.id === colDef.id) {
+                    colDef.hide = col.hide;
+                }
+            });
+            return colDef;
+        });
+        gridRef.current.api.setGridOption("columnDefs", updatedColumnDefs);
+    }, [props === null || props === void 0 ? void 0 : props.columnData]);
+    console.log(props === null || props === void 0 ? void 0 : props.columnData, gridData === null || gridData === void 0 ? void 0 : gridData.columnData, 'column from props and grid data');
     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 }, 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)(context_provider_1.default, Object.assign({ value: {
                                 featureDetails,
                                 setFeatureDetails,
@@ -267,6 +285,7 @@ function ParentForGrid(props) {
                                 clearFilters: props === null || props === void 0 ? void 0 : props.clearFilters,
                                 setGridData,
                                 gridApi: gridRef,
+                                updateColumnsForGrid: props === null || props === void 0 ? void 0 : props.updateColumnsForGrid
                             } }, { 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, gridRef: gridRef })] }) })) }) }));
 }
 exports.default = ParentForGrid;

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

@@ -12,7 +12,13 @@ export interface ColumnDef extends ColDef {
     options?: any[];
     selectionType?: string;
     columnType?: string;
+    visibleInPanel?: boolean;
+    seq?: number;
+}
+export interface ColHideShow extends ColumnDef {
     checked?: boolean;
+    selected?: boolean;
+    unSelected?: boolean;
 }
 export interface Style {
     height: number | string;
@@ -86,6 +92,7 @@ export interface ConditionsToDisplay {
     displayColumnHide?: boolean;
     displayBulkAction?: boolean;
     enableViewCreate?: boolean;
+    displaySidePanel?: boolean;
 }
 export interface PropsFromProduct {
     columnData: ColumnDef[];
@@ -103,6 +110,7 @@ export interface PropsFromProduct {
     sortOptions?: any[];
     filterConditions?: FilterCondition[];
     clearFilters?: Boolean;
+    updateColumnsForGrid?: (columns: ColumnDef) => void;
 }
 export interface ResoponseFromCallback {
     totalRecords: number;

package/dist/types/components/ag-grid/context-provider.d.ts

@@ -1,4 +1,4 @@
-import { Features, FilterCondition, FilterModelText, GridData, RecordDetailModelText, SortModelText } from "./Types";
+import { ColumnDef, Features, FilterCondition, FilterModelText, GridData, RecordDetailModelText, SortModelText } from "./Types";
 export declare const FeatureContext: import("react").Context<any>;
 interface MyProviderProps {
     children: React.ReactNode;
@@ -20,6 +20,7 @@ interface MyProviderProps {
         clearFilters: Boolean;
         setGridData: (GridData: any) => void;
         gridApi: any;
+        updateColumnsForGrid: (columns: ColumnDef) => void;
     };
 }
 declare function MyProvider({ children, value }: MyProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,3 @@
 export declare const applyDefaultFilters: (defaultFilters: any) => any;
 export declare const parseIfNeeded: (value: any) => any;
+export declare const sortColumns: (columns: any) => any;

package/package.json

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