@syncfusion/ej2-vue-grids 20.3.62 → 20.4.40

package/package.json

@@ -1,73 +1,62 @@
-{
-    "_from": "@syncfusion/ej2-vue-grids@*",
-    "_id": "@syncfusion/ej2-vue-grids@20.3.60",
-    "_inBundle": false,
-    "_integrity": "sha512-OEa2zFc2d/qpQd58VJPiaYsRt0Hv1kVvEVtquueVt8nWWx8KCrI8oPQ3peJdkOkfbfc5AZ4TaieMolYqFpw36w==",
-    "_location": "/@syncfusion/ej2-vue-grids",
-    "_phantomChildren": {},
-    "_requested": {
-      "type": "range",
-      "registry": true,
-      "raw": "@syncfusion/ej2-vue-grids@*",
-      "name": "@syncfusion/ej2-vue-grids",
-      "escapedName": "@syncfusion%2fej2-vue-grids",
-      "scope": "@syncfusion",
-      "rawSpec": "*",
-      "saveSpec": null,
-      "fetchSpec": "*"
-    },
-    "_requiredBy": [
-      "/"
-    ],
-    "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-grids/-/ej2-vue-grids-20.3.60.tgz",
-    "_shasum": "fb4914da2d0e55e06667a26a02a4cfd42224a2c6",
-    "_spec": "@syncfusion/ej2-vue-grids@*",
-    "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
-    "author": {
-      "name": "Syncfusion Inc."
-    },
-    "bugs": {
-      "url": "https://github.com/syncfusion/ej2-vue-ui-components/issues"
-    },
-    "bundleDependencies": false,
-    "dependencies": {
-      "@syncfusion/ej2-base": "~20.3.56",
-      "@syncfusion/ej2-grids": "20.3.62",
-      "@syncfusion/ej2-vue-base": "~20.3.59"
-    },
-    "deprecated": false,
-    "description": "Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel. for Vue",
-    "devDependencies": {},
-    "es2015": "dist/es6/ej2-vue-grids.es2015.js",
-    "homepage": "https://github.com/syncfusion/ej2-vue-ui-components#readme",
-    "keywords": [
-      "ej2",
-      "ej2-grids",
-      "syncfusion",
-      "web-components",
-      "data-grid",
-      "data-table",
-      "grid",
-      "pager",
-      "data",
-      "table",
-      "Typescript",
-      "vue",
-      "vuejs",
-      "vue-grids",
-      "ej2-vue-grids"
-    ],
-    "license": "SEE LICENSE IN license",
-    "main": "./dist/ej2-vue-grids.umd.min.js",
-    "module": "./index.js",
-    "name": "@syncfusion/ej2-vue-grids",
-    "repository": {
-      "type": "git",
-      "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
-    },
-    "scripts": {
-      "postinstall": "node ../ej2-vue-base/postinstall.js"
-    },
-    "version": "20.3.62",
-    "sideEffects": false
-  }
+{
+  "_from": "@syncfusion/ej2-vue-grids@*",
+  "_id": "@syncfusion/ej2-vue-grids@20.4.38",
+  "_inBundle": false,
+  "_integrity": "sha512-8hVHKa3Joo70WAfEVWVfqqFKeLm64lYNeEfHyRDx0sfrmX8Npo8Jl/xX9fjavkmo2auEsDdh325DXpTp+W3eRw==",
+  "_location": "/@syncfusion/ej2-vue-grids",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "@syncfusion/ej2-vue-grids@*",
+    "name": "@syncfusion/ej2-vue-grids",
+    "escapedName": "@syncfusion%2fej2-vue-grids",
+    "scope": "@syncfusion",
+    "rawSpec": "*",
+    "saveSpec": null,
+    "fetchSpec": "*"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-grids/-/ej2-vue-grids-20.4.38.tgz",
+  "_shasum": "9dca19d190ccccb36634a074ccdb94c05623e221",
+  "_spec": "@syncfusion/ej2-vue-grids@*",
+  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "author": {
+    "name": "Syncfusion Inc."
+  },
+  "bugs": {
+    "url": "https://github.com/syncfusion/ej2-vue-ui-components/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "@syncfusion/ej2-base": "~20.4.40",
+    "@syncfusion/ej2-grids": "20.4.40",
+    "@syncfusion/ej2-vue-base": "~20.4.40"
+  },
+  "deprecated": false,
+  "description": "Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel. for Vue",
+  "devDependencies": {},
+  "es2015": "dist/es6/ej2-vue-grids.es2015.js",
+  "homepage": "https://www.syncfusion.com/vue-components",
+  "keywords": [
+    "vue",
+    "vuejs",
+    "vue-grids",
+    "ej2-vue-grids"
+  ],
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-vue-grids.umd.min.js",
+  "module": "./index.js",
+  "name": "@syncfusion/ej2-vue-grids",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
+  },
+  "scripts": {
+    "postinstall": "node ../ej2-vue-base/postinstall.js"
+  },
+  "version": "20.4.40",
+  "sideEffects": false
+}

package/src/pager/pager.component.d.ts

@@ -26,6 +26,9 @@ export declare class PagerComponent extends ComponentBase {
     constructor();
     clearTemplate(templateNames?: string[]): any;
     setProperties(prop: any, muteOnChange: boolean): void;
+    trigger(eventName: string, eventProp: {
+        [key: string]: Object;
+    }, successHandler?: Function): void;
     render(createElement: any): any;
     custom(): void;
     destroyTemplate(propertyNames?: string[], index?: any): void;

package/src/pager/pager.component.js

@@ -17,12 +17,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { isUndefined } from '@syncfusion/ej2-base';
 import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Pager } from '@syncfusion/ej2-grids';
 import { Options } from 'vue-class-component';
 export var properties = ['isLazyUpdate', 'plugins', 'cssClass', 'currentPage', 'customText', 'enableExternalMessage', 'enablePagerMessage', 'enablePersistence', 'enableQueryString', 'enableRtl', 'externalMessage', 'locale', 'pageCount', 'pageSize', 'pageSizes', 'template', 'totalRecordsCount', 'click', 'created', 'dropDownChanged'];
-export var modelProps = [];
+export var modelProps = ['currentPage', 'pageSize', 'pageCount', 'pageSizes'];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];
 export var watch = testProp[1];
@@ -50,6 +51,8 @@ var PagerComponent = /** @class */ (function (_super) {
         _this.tagNameMapper = {};
         _this.isVue3 = !isExecute;
         _this.ej2Instances = new Pager({});
+        _this.ej2Instances._trigger = _this.ej2Instances.trigger;
+        _this.ej2Instances.trigger = _this.trigger;
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
@@ -105,6 +108,45 @@ var PagerComponent = /** @class */ (function (_super) {
             });
         }
     };
+    PagerComponent.prototype.trigger = function (eventName, eventProp, successHandler) {
+        if (!isExecute) {
+            this.models = !this.models ? this.ej2Instances.referModels : this.models;
+        }
+        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+            var key = this.models.toString().match(/checked|value/) || [];
+            var propKey = key[0];
+            if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                if (!isExecute) {
+                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                }
+                else {
+                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                        this.$emit('update:' + propKey, eventProp[propKey]);
+                        this.$emit('modelchanged', eventProp[propKey]);
+                    }
+                }
+            }
+        }
+        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+            var key = this.models.toString().match(/currentView|selectedDate/) || [];
+            var propKey = key[0];
+            if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                if (!isExecute) {
+                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                }
+                else {
+                    this.$emit('update:' + propKey, eventProp[propKey]);
+                    this.$emit('modelchanged', eventProp[propKey]);
+                }
+            }
+        }
+        if ((this.ej2Instances && this.ej2Instances._trigger)) {
+            this.ej2Instances._trigger(eventName, eventProp, successHandler);
+        }
+    };
     PagerComponent.prototype.render = function (createElement) {
         var h = !isExecute ? gh : createElement;
         var slots = null;
@@ -130,7 +172,10 @@ var PagerComponent = /** @class */ (function (_super) {
     };
     PagerComponent = __decorate([
         EJComponentDecorator({
-            props: properties
+            props: properties,
+            model: {
+                event: 'modelchanged'
+            }
         }, isExecute)
         ,Options({
             props: props,

package/styles/bootstrap-dark.css

@@ -3503,7 +3503,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/bootstrap.css

@@ -3504,7 +3504,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/bootstrap4.css

@@ -1617,6 +1617,9 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #495057;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #495057;
 }
@@ -3563,7 +3566,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3738,6 +3740,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 0;
+  color: #495057;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/bootstrap5-dark.css

@@ -1623,6 +1623,9 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #adb5bd;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #adb5bd;
 }
@@ -3567,7 +3570,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3750,6 +3752,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #adb5bd;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/bootstrap5.css

@@ -1623,6 +1623,9 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #6c757d;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #6c757d;
 }
@@ -3567,7 +3570,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3750,6 +3752,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #6c757d;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/fabric-dark.css

@@ -3477,7 +3477,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/fabric.css

@@ -3470,7 +3470,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/fluent-dark.css

@@ -3583,7 +3583,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/fluent.css

@@ -3583,7 +3583,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/bootstrap-dark.css

@@ -3091,7 +3091,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/bootstrap.css

@@ -3092,7 +3092,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/bootstrap4.css

@@ -1194,6 +1194,9 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #495057;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #495057;
 }
@@ -3140,7 +3143,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3315,6 +3317,7 @@
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 0;
+  color: #495057;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/grid/bootstrap5-dark.css

@@ -1208,6 +1208,9 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #adb5bd;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #adb5bd;
 }
@@ -3152,7 +3155,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3335,6 +3337,7 @@
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #adb5bd;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/grid/bootstrap5.css

@@ -1208,6 +1208,9 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus {
   background: none;
 }
+.e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-tbar-btn:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-search-icon:focus .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:hover .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:active .e-icons, .e-grid .e-res-toolbar .e-toolbar-items .e-sicon.e-clear-icon:focus .e-icons {
+  color: #6c757d;
+}
 .e-grid .e-res-toolbar .e-toolbar-items .e-icons {
   color: #6c757d;
 }
@@ -3152,7 +3155,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {
@@ -3335,6 +3337,7 @@
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active .e-icons,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus .e-icons {
   padding-bottom: 4px;
+  color: #6c757d;
 }
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-search-icon,
 .e-bigger.e-grid.e-row-responsive .e-toolbar .e-search-icon {

package/styles/grid/fabric-dark.css

@@ -3065,7 +3065,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/fabric.css

@@ -3058,7 +3058,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/fluent-dark.css

@@ -3168,7 +3168,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/fluent.css

@@ -3168,7 +3168,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/highcontrast-light.css

@@ -3062,7 +3062,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/highcontrast.css

@@ -3062,7 +3062,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/material-dark.css

@@ -3106,7 +3106,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/material.css

@@ -3140,7 +3140,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/tailwind-dark.css

@@ -3176,7 +3176,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/grid/tailwind.css

@@ -3176,7 +3176,6 @@
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/highcontrast-light.css

@@ -3474,7 +3474,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/highcontrast.css

@@ -3474,7 +3474,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/material-dark.css

@@ -3524,7 +3524,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/material.css

@@ -3566,7 +3566,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/tailwind-dark.css

@@ -3592,7 +3592,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {

package/styles/tailwind.css

@@ -3592,7 +3592,6 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.sf-grid .e-frozencontent {
   border-bottom-style: solid;
   height: inherit;
-  overflow: hidden;
 }
 .e-grid.sf-grid .e-gridcontent .e-content,
 .e-grid.sf-grid .e-gridcontent .e-content .e-movablecontent {