sccoreui 6.2.77 → 6.2.78

package/dist/App.js

@@ -4,6 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("./App.scss");
 // import Home from "./pages/home";
 const App = () => {
-    return ((0, jsx_runtime_1.jsx)("div", {}));
+    return (0, jsx_runtime_1.jsx)("div", {});
 };
 exports.default = App;

package/dist/App.scss

@@ -381,6 +381,12 @@ code {
   }
 }
 
+.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.2;
+}
+
 // CUSTOM multiselect style started
 .Multi_select_dropdown_panel {
   .p-multiselect-header {
@@ -1054,6 +1060,31 @@ button[aria-expanded="true"] {
   width: 30px !important;
 }
 
+.icon-38x38 {
+  height: 38px !important;
+  width: 38px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-40x40 {
+  height: 40px !important;
+  width: 40px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &.feature-hover {
+    &:hover {
+      svg {
+        path {
+          stroke: var(--primary-400);
+        }
+      }
+    }
+  }
+}
+
 .list_box_dropdown {
   .p-listbox-header {
     padding: 12px !important;
@@ -2514,11 +2545,6 @@ button[aria-expanded="true"] {
   height: 32px;
 }
 
-.icon-38x38 {
-  width: 32px;
-  height: 32px;
-}
-
 .h-38 {
   height: 38px;
 }

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

@@ -28,10 +28,10 @@ function AdvancedFeatures({ props }) {
     const AdvanceFilterWrapper = () => {
         return AdvancedFilter && (0, jsx_runtime_1.jsx)(AdvancedFilter, {});
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props === null || props === void 0 ? void 0 : props.editMode) ? ((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.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: (isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayEditHeading) &&
-                        (props === null || props === void 0 ? void 0 : props.EditHeadingDetails)) && (0, jsx_runtime_1.jsx)(EditDetails, {}) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(gridS_search_1.default, {})) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && (0, jsx_runtime_1.jsx)(hide_column_1.default, {}), (isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
-                            (props === null || props === void 0 ? void 0 : props.BulkEditComponent)) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), (props === null || props === void 0 ? void 0 : props.editMode) && (0, jsx_runtime_1.jsx)(bulk_edit_action_1.default, { props: props })] }))] }))) : ((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: [isComponentVisible(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 })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && ((0, jsx_runtime_1.jsx)(table_filter_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayAdvancedFilter) && ((0, jsx_runtime_1.jsx)(AdvanceFilterWrapper, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRowGroupingElement) && (0, jsx_runtime_1.jsx)(column_group_1.default, { dataFromProps: props })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && (0, jsx_runtime_1.jsx)(hide_column_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRemoveItems) && ((0, jsx_runtime_1.jsx)(remove_items_1.default, { removeCallBack: props.removeCallBack })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
-                            (props === null || props === void 0 ? void 0 : props.BulkEditComponent) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), (isComponentVisible(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 })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && (0, jsx_runtime_1.jsx)(refresh_grid_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRecords) && (0, jsx_runtime_1.jsx)(record_detail_1.default, {})] }))] }))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props === null || props === void 0 ? void 0 : props.editMode) ? ((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.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayEditHeading) &&
+                        (props === null || props === void 0 ? void 0 : props.EditHeadingDetails) && (0, jsx_runtime_1.jsx)(EditDetails, {}) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(gridS_search_1.default, {})) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && ((0, jsx_runtime_1.jsx)(hide_column_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
+                            (props === null || props === void 0 ? void 0 : props.BulkEditComponent) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), (props === null || props === void 0 ? void 0 : props.editMode) && (0, jsx_runtime_1.jsx)(bulk_edit_action_1.default, { props: props })] }))] }))) : ((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: [isComponentVisible(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 })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && ((0, jsx_runtime_1.jsx)(table_filter_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayAdvancedFilter) && ((0, jsx_runtime_1.jsx)(AdvanceFilterWrapper, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRowGroupingElement) && (0, jsx_runtime_1.jsx)(column_group_1.default, { dataFromProps: props })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && ((0, jsx_runtime_1.jsx)(hide_column_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRemoveItems) && ((0, jsx_runtime_1.jsx)(remove_items_1.default, { removeCallBack: props.removeCallBack })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
+                            (props === null || props === void 0 ? void 0 : props.BulkEditComponent) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), isComponentVisible(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 })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && ((0, jsx_runtime_1.jsx)(refresh_grid_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRecords) && ((0, jsx_runtime_1.jsx)(record_detail_1.default, {}))] }))] }))) }));
 }
 exports.default = AdvancedFeatures;

package/dist/components/ag-grid/advancedFeature/bulk-edit-action.js

@@ -1,8 +1,10 @@
 "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 utilComponents_1 = require("../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
 function BulkEditAction({ props }) {
     var _a, _b, _c;
     const { dynamicText } = props;
@@ -16,6 +18,6 @@ function BulkEditAction({ props }) {
             return;
         props === null || props === void 0 ? void 0 : props.discardBulkEdit();
     };
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", text: true, onClick: onDiscard, label: ((_a = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _a === void 0 ? void 0 : _a.discard) || "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", disabled: !((_b = props === null || props === void 0 ? void 0 : props.bulkEditedRecords) === null || _b === void 0 ? void 0 : _b.length), onClick: onSave, label: ((_c = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _c === void 0 ? void 0 : _c.save) || "Update Changes" })] })));
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", text: true, onClick: onDiscard, label: ((_a = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _a === void 0 ? void 0 : _a.discard) || "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", disabled: !((_b = props === null || props === void 0 ? void 0 : props.bulkEditedRecords) === null || _b === void 0 ? void 0 : _b.length), onClick: onSave, label: ((_c = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _c === void 0 ? void 0 : _c.save) || "Update Changes" })] })));
 }
 exports.default = BulkEditAction;

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

@@ -12,6 +12,7 @@ const button_1 = require("primereact/button");
 const context_provider_1 = require("../context-provider");
 const helper_1 = require("../helper");
 const utilComponents_1 = require("../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
 // import { ColumnDef } from "../Types";
 const ColumnGroup = (props) => {
     var _a, _b, _c, _d;
@@ -197,9 +198,9 @@ const ColumnGroup = (props) => {
             setRenderColumns(columnsFromGrid);
         }
     }, [(_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length]);
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
-                    ? "bg-primary-50 h-38"
-                    : "bg-white icon-38x38"} hover:bg-primary-25 br-8 sc_icon_hover cursor-pointer px-2 flex align-items-cente gap-1 zoom_animate`, ref: btnRef, onClick: (e) => !isDisabled && showColumnOptions(e) }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18, disabled: isDisabled, color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 ? "bg-primary-50" : "bg-white"} hover:bg-primary-25 br-8 icon-40x40 sc_icon_hover cursor-pointer px-2 flex align-items-cente gap-1 zoom_animate ${isDisabled && "disabled"}`, ref: btnRef, onClick: (e) => !isDisabled && showColumnOptions(e), title: "Column Grouping" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18, 
+                        // disabled={isDisabled}
+                        color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
                             ? "text-primary-400"
                             : "text-gray-500" }), !isDisabled && (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { 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 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
                                                 ? "col-gr-icon-active mr-2"

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

@@ -11,6 +11,7 @@ const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg
 const context_provider_1 = require("../context-provider");
 const helper_1 = require("../helper");
 const utilComponents_1 = require("../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
 function Sort() {
     var _a, _b;
     const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
@@ -89,13 +90,15 @@ function Sort() {
             setIsApplyDisable(true);
         }
     }, [sortValue, sortBy]);
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer sc_icon_hover flex align-items-center border-round hover:bg-primary-25 ${isOverlayOpened || featureDetails.sort.isSortable
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `icon-40x40 cursor-pointer sc_icon_hover flex align-items-center border-round hover:bg-primary-25 ${isDisabled && "disabled"} ${isOverlayOpened || featureDetails.sort.isSortable
                     ? "bg-primary-50"
-                    : "bg-white"}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.onSelectedSort)
+                    : "bg-white"}`, title: "Column Sorting" }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.onSelectedSort)
                             ? sortModelText.onSelectedSort
-                            : `Selected` }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover border-round-md`, onClick: (event) => !isDisabled && onClickSort(event) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", disabled: isDisabled, size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
+                            : `Selected` }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover border-round-md`, onClick: (event) => !isDisabled && onClickSort(event) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", 
+                            // disabled={isDisabled}
+                            size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
                                 ? "text-primary-400"
-                                : "text-gray-700" }) }))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold  line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.header) ? sortModelText.header : "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
+                                : "text-gray-500" }) }))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold  line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.header) ? sortModelText.header : "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-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({ title: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName, className: `${isSelected && "bg-primary-25"} cursor-pointer br-6 flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700 hover:bg-primary-25 mb-1`, 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: `cursor-pointer line-clamp line-clamp-1 block w-15rem ${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));

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

@@ -10,6 +10,7 @@ const hooks_1 = require("primereact/hooks");
 const constants_1 = require("../constants");
 const helper_1 = require("../helper");
 const utilComponents_1 = require("../utilComponents");
+const skeleton_1 = require("primereact/skeleton");
 function Search({ searchPlaceHolder }) {
     const { featureDetails, setFeatureDetails, rowModelType, gridApi, quickSearch, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const [inputValue, deboucedValue, setInputValue] = (0, hooks_1.useDebounce)("", 500);
@@ -32,7 +33,7 @@ function Search({ searchPlaceHolder }) {
             setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: deboucedValue }));
         }
     }, [deboucedValue]);
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)("div", 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 zoom_animate" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18, disabled: isDisabled }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: () => {
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", width: "336px" })) : ((0, jsx_runtime_1.jsxs)("div", 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 zoom_animate" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18, disabled: isDisabled }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", 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: inputValue, onChange: (e) => !isDisabled && setInputValue(e.target.value), className: "w-21rem", placeholder: searchPlaceHolder || "Search by name or code", disabled: isDisabled })] })));

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

@@ -8,6 +8,7 @@ const inputtext_1 = require("primereact/inputtext");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
 const helper_1 = require("../helper");
 const utilComponents_1 = require("../utilComponents");
+const skeleton_1 = require("primereact/skeleton");
 function GridSearch() {
     const { gridApi, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySearch);
@@ -17,6 +18,6 @@ function GridSearch() {
             (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current.api) === null || _a === void 0 ? void 0 : _a.setGridOption("quickFilterText", document.getElementById("filter-text-box").value);
         }
     }, []);
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading" })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-20rem" }, { 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", size: 20, disabled: isDisabled }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", id: "filter-text-box", placeholder: "Search", onInput: onFilterTextBoxChanged, disabled: isDisabled, className: "text-lg font-normal text-gray-500 hover:text-gray-900 lh-40 w-full" })] })));
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", width: "336px" })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-20rem" }, { 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", size: 20, disabled: isDisabled }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", id: "filter-text-box", placeholder: "Search", onInput: onFilterTextBoxChanged, disabled: isDisabled, className: "text-lg font-normal text-gray-500 hover:text-gray-900 lh-40 w-full" })] })));
 }
 exports.default = GridSearch;

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

@@ -12,6 +12,7 @@ const sidebar_1 = require("primereact/sidebar");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
 const helper_1 = require("../helper");
 const utilComponents_1 = require("../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
 function HideColumn() {
     const { columnToRender, gridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, sidePanelText, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
@@ -167,7 +168,7 @@ function HideColumn() {
         setVisibleRight(false);
         setInputValue("");
     };
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => !isDisabled && setVisibleRight(true), className: "rounded_btn sc_icon_hover" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", size: 18, disabled: isDisabled }) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-4 overflow-hidden h-full ag_grid_sidebar", visible: visibleRight, position: "right", onHide: () => hidePanel() }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sticky top-0 z-5 bg-white" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center px-4 py-3 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-lg font-semibold line-height-3" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.header) || "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, { className: "font-semibold", text: true, label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.disacrd_button) || "Discard", onClick: () => hidePanel() }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "font-semibold", label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.update_button) || "Update", disabled: (storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((node) => node.checked).length) > 15
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => !isDisabled && setVisibleRight(true), className: `rounded_btn sc_icon_hover icon-40x40 ${isDisabled && "disabled"}`, title: "Manage Columns" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", color: "text-gray-500", size: 18 }) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-4 overflow-hidden h-full ag_grid_sidebar", visible: visibleRight, position: "right", onHide: () => hidePanel() }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sticky top-0 z-5 bg-white" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center px-4 py-3 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-lg font-semibold line-height-3" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.header) || "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, { className: "font-semibold", text: true, label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.disacrd_button) || "Discard", onClick: () => hidePanel() }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "font-semibold", label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.update_button) || "Update", disabled: (storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((node) => node.checked).length) > 15
                                                     ? true
                                                     : false, onClick: () => updateColumns() })] }))] })), enableManageColumnsCallback && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 pb-0" }, { children: [(0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: "flex align-items-center justify-content-between my-0" }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_to_all_views) || "Apply to all views", (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: enableManageColumnsCallbackAPI, onChange: (e) => setEnableManageColumnsCallbackAPI(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_subHeading) ||
                                             "Apply the chosen column selection to all available views" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mt-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" }) })), (inpValue === null || inpValue === void 0 ? void 0 : inpValue.length) > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: clearSearch }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) }))), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", value: inpValue, onChange: (e) => {

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

@@ -13,6 +13,7 @@ const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/
 const constants_1 = tslib_1.__importDefault(require("../../constants"));
 const helper_1 = require("../../helper");
 const utilComponents_1 = require("../../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../../skeletons/FeatureSkeleton"));
 // import "./TableFilter.module.scss";
 const TableFilter = () => {
     const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText, enableAdvancedFilter, gridApi, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
@@ -163,19 +164,19 @@ const TableFilter = () => {
         });
         setAllFieldsFilled(isAllFieldsFilled && enbleApply);
     }, [conditionsArray, enbleApply]);
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-lg ${isOverlayOpened ||
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 icon-40x40 sc_icon_hover flex align-items-center gap-2 border-round-lg ${isDisabled && "disabled"} ${isOverlayOpened ||
                     (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
                     ? "bg-primary-50"
-                    : "bg-white"}` }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
+                    : "bg-white"}`, title: "Apply Filters" }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
                                     (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
                                     ? "#243DC6"
-                                    : "#667085", disabled: isDisabled }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter)
+                                    : "#667085" }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter)
                                         ? filterModelText.onSelectedFilter
                                         : "Selected"}`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
                                             e.preventDefault();
                                             e.stopPropagation();
                                             onresetFilter();
-                                        } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] }))] })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showFilter, onShow: () => setIsOverlayOpened(true), onHide: filterLogoToggle, className: "table-filter-overlay" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-3 text-gray-900" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader)
+                                        } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] }))] })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showFilter, onShow: () => setIsOverlayOpened(true), onHide: filterLogoToggle, className: "table-filter-overlay mt-5 -ml-2" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-3 text-gray-900" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader)
                                         ? filterModelText.subHeader
                                         : "Streamline Your Search With Filters" }))] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-y-auto overflow-x-hidden flex flex-column gap-1" }, { children: conditionsArray.map((eachCondition, index) => {
                                     return ((0, jsx_runtime_1.jsx)("div", { children: renderCondition(eachCondition, index) }, index));

package/dist/components/ag-grid/advancedFeature/record-detail.js

@@ -1,12 +1,14 @@
 "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 context_provider_1 = require("../context-provider");
 const utilComponents_1 = require("../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
 function RecordDetail() {
     const { totalRecords, recordDetailModelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (recordDetailModelText === null || recordDetailModelText === void 0 ? void 0 : recordDetailModelText.totalRecordHeader)
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, { width: "100px" })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (recordDetailModelText === null || recordDetailModelText === void 0 ? void 0 : recordDetailModelText.totalRecordHeader)
             ? `${recordDetailModelText.totalRecordHeader}  ${totalRecords}  `
             : `Total ${totalRecords} records` }));
 }

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

@@ -7,6 +7,7 @@ const context_provider_1 = require("../context-provider");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
 const helper_1 = require("../helper");
 const utilComponents_1 = require("../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
 function RefreshGrid() {
     const { removeFeaturesAndRefresh, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayRefresh);
@@ -15,6 +16,6 @@ function RefreshGrid() {
             removeFeaturesAndRefresh();
         }
     };
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rounded_btn sc_icon_hover", onClick: refreshHandler }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01", color: "text-gray-700", disabled: isDisabled }) })));
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover icon-40x40 ${isDisabled && "disabled"}`, onClick: refreshHandler, title: "Refresh" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01", color: "text-gray-500" }) })));
 }
 exports.default = RefreshGrid;

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

@@ -7,6 +7,7 @@ const context_provider_1 = require("../context-provider");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
 const helper_1 = require("../helper");
 const utilComponents_1 = require("../utilComponents");
+const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
 function RemoveItems(props) {
     const { featureDetails, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const { removeCallBack } = props;
@@ -18,6 +19,6 @@ function RemoveItems(props) {
             removeCallBack(currentFeature);
         }
     };
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rounded_btn sc_icon_hover", onClick: removeItemsCallBack }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", color: "text-red-800", size: 18, disabled: isDisabled }) })));
+    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover icon-40x40 ${isDisabled && "disabled"}`, onClick: removeItemsCallBack, title: "Remove" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", color: "text-red-800", size: 18 }) })));
 }
 exports.default = RemoveItems;

package/dist/components/skeletons/FeatureSkeleton.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skeleton_1 = require("primereact/skeleton");
+const FeatureSkeleton = ({ height, width }) => {
+    return ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: height ? height : "30px", width: width ? width : "30px" }));
+};
+exports.default = FeatureSkeleton;

package/dist/types/components/skeletons/FeatureSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare const FeatureSkeleton: ({ height, width }: any) => import("react/jsx-runtime").JSX.Element;
+export default FeatureSkeleton;

package/package.json

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