@syncfusion/ej2-angular-grids 20.4.54 → 21.1.35-ngcc

package/styles/grid/highcontrast.css

@@ -380,8 +380,8 @@
   min-width: 38px;
   padding: 0;
 }
-.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons,
-.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons {
+.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons,
+.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons {
   font-size: 18px;
 }
 .e-bigger .e-grid .e-flmenu-valuediv,
@@ -421,8 +421,8 @@
 .e-grid.e-bigger .e-icon-grightarrow {
   font-size: 14px;
 }
-.e-bigger .e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn,
-.e-grid.e-bigger .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-bigger .e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn,
+.e-grid.e-bigger .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 12px;
 }
 .e-bigger .e-grid .e-gridheader tr th:last-child,
@@ -535,6 +535,10 @@
 .e-grid.e-bigger .e-gridheader .e-fltr-icon .e-sortfilterdiv {
   margin: -23px 20px 0 0;
 }
+.e-bigger .e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv,
+.e-grid.e-bigger.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0 0 0.2em;
+}
 .e-bigger .e-grid .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
 .e-bigger .e-grid .e-wrap .e-sortfilterdiv,
 .e-grid.e-bigger .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -1690,6 +1694,9 @@
 .e-grid .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
   padding: 0 10px 0 0;
 }
+.e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0 0 0;
+}
 .e-grid .e-filtermenudiv {
   float: right;
   margin: -24px -7px;
@@ -1776,7 +1783,7 @@
   padding: 6px;
 }
 .e-grid.e-wrap .e-columnmenu {
-  margin: -20px -24px -24px -24px;
+  line-height: 18px;
 }
 .e-grid.e-rtl .e-columnmenu {
   left: 5px;
@@ -1784,7 +1791,7 @@
   margin: -26px -18px -18px -6px;
 }
 .e-grid.e-wrap.e-rtl .e-columnmenu {
-  margin: -13px -13px -23px -3px;
+  line-height: 18px;
 }
 .e-grid [class^=e-] {
   box-sizing: border-box;
@@ -1808,6 +1815,15 @@
   border-top-width: 1px;
   padding: 0.3em;
 }
+.e-grid th.e-detailcell .e-rowcell,
+.e-grid th.e-detailcell .e-gridpager {
+  text-align: left;
+}
+.e-grid.e-rtl th.e-detailcell .e-rowcell, .e-grid.e-rtl th.e-detailcell .e-gridpager,
+.e-grid th.e-detailcell .e-rtl .e-rowcell,
+.e-grid th.e-detailcell .e-rtl .e-gridpager {
+  text-align: right;
+}
 .e-grid.e-verticallines .e-rowcell, .e-grid.e-verticallines .e-filterbarcell {
   border-width: 0 0 0 1px;
 }
@@ -2285,9 +2301,8 @@
       -ms-user-select: none;
           user-select: none;
 }
-.e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 9px;
-  line-height: 3;
 }
 .e-grid .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
   margin-top: 5px;
@@ -2680,6 +2695,11 @@
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
   margin: -7px;
 }
+.e-grid.e-rtl.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv, .e-grid.e-rtl .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+  height: auto;
+  margin-bottom: 2px;
+  margin-top: 0;
+}
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
   margin: -7px;
 }
@@ -2881,7 +2901,7 @@
   margin: -18px -7px;
   padding: 6px;
 }
-.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv {
+.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2892,17 +2912,17 @@
 .e-grid.e-wrap .e-stackedheader .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-stackedheader .e-columnheader .e-headercelldiv {
   max-height: 36px;
 }
-.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv {
+.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
   margin-bottom: 2px;
   margin-top: 0;
 }
-.e-grid.e-wrap .e-columnheader .e-filtermenudiv {
+.e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
   line-height: 18px;
 }
-.e-grid .e-columnheader.e-wrap .e-filtermenudiv {
+.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
   line-height: 18px;
 }
-.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
+.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2921,10 +2941,10 @@
   margin: -17px 10px 0 0;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -16px 30px;
+  margin: -17px 18px;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon.e-rightalign .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon.e-rightalign .e-sortfilterdiv {
-  margin: -15px 8px;
+  margin: -17px 8px;
 }
 .e-grid .e-columnheader.e-wrap .e-icon-group::before, .e-grid.e-wrap .e-columnheader .e-icon-group::before {
   display: inline-block;
@@ -3667,6 +3687,13 @@
   float: left;
 }
 
+/* stylelint-disable */
+.e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
+.e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
+  max-height: 298px !important;
+}
+
+/* stylelint-enable */
 /*! Grid theme */
 .e-grid {
   border-color: #969696;
@@ -3854,11 +3881,11 @@
 .e-grid.e-rtl .e-frozenheader.e-frozen-right-header > .e-table, .e-grid.e-rtl .e-frozencontent.e-frozen-right-content > .e-table {
   border-right-color: #ffd939;
 }
-.e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: #685708;
   color: #fff;
 }
-.e-grid tr[role=row]:hover .e-rowdragdrop {
+.e-grid .e-row:hover .e-rowdragdrop {
   cursor: move;
 }
 .e-grid .e-sortnumber {

package/styles/grid/highcontrast.scss

@@ -1,21 +1 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
-@import 'ej2-navigations/styles/pager/highcontrast-definition.scss';
-@import '../excel-filter/highcontrast-definition.scss';
-@import 'ej2-inputs/styles/input/highcontrast-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/highcontrast-definition.scss';
-@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
-@import 'ej2-buttons/styles/radio-button/highcontrast-definition.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
-@import 'ej2-dropdowns/styles/auto-complete/highcontrast-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/highcontrast-definition.scss';
-@import 'ej2-popups/styles/dialog/highcontrast-definition.scss';
-@import 'ej2-popups/styles/spinner/highcontrast-definition.scss';
-@import 'ej2-popups/styles/tooltip/highcontrast-definition.scss';
-@import 'ej2-calendars/styles/datepicker/highcontrast-definition.scss';
-@import 'ej2-calendars/styles/datetimepicker/highcontrast-definition.scss';
-@import 'ej2-navigations/styles/toolbar/highcontrast-definition.scss';
-@import 'ej2-navigations/styles/context-menu/highcontrast-definition.scss';
-@import 'ej2-notifications/styles/skeleton/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
+@import 'ej2-grids/styles/grid/highcontrast.scss';

package/styles/grid/material-dark.css

@@ -424,8 +424,8 @@
   min-width: 20px;
   padding: 0;
 }
-.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons,
-.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons {
+.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons,
+.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons {
   font-size: 18px;
 }
 .e-bigger .e-grid .e-flmenu-valuediv,
@@ -465,8 +465,8 @@
 .e-grid.e-bigger .e-icon-grightarrow {
   font-size: 12px;
 }
-.e-bigger .e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn,
-.e-grid.e-bigger .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-bigger .e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn,
+.e-grid.e-bigger .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 12px;
 }
 .e-bigger .e-grid .e-gridheader tr th:last-child,
@@ -579,6 +579,10 @@
 .e-grid.e-bigger .e-gridheader .e-fltr-icon .e-sortfilterdiv {
   margin: -15px 18px;
 }
+.e-bigger .e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv,
+.e-grid.e-bigger.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0.6em 0 1.15em;
+}
 .e-bigger .e-grid .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
 .e-bigger .e-grid .e-wrap .e-sortfilterdiv,
 .e-grid.e-bigger .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -650,11 +654,11 @@
 }
 .e-bigger .e-grid.e-rtl .e-gridheader .e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger.e-rtl .e-gridheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -15px 30px 0 0;
+  margin: -20px 30px 0 14px;
 }
 .e-bigger .e-grid.e-rtl .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger.e-rtl .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
-  margin: -16px 10px;
+  margin: -20px 14px;
 }
 .e-bigger .e-grid.e-rtl .e-filtermenudiv,
 .e-grid.e-bigger.e-rtl .e-filtermenudiv {
@@ -1734,6 +1738,9 @@
 .e-grid .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
   padding: 0 1.8em 0 0.6em;
 }
+.e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0.6em 0 0.55em;
+}
 .e-grid .e-filtermenudiv {
   float: right;
   margin: -18px -7px;
@@ -1800,10 +1807,10 @@
   margin: -16px 5px;
 }
 .e-grid.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
-  margin: 3px 2px 0 5px;
+  margin: 1px 2px 0 15px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortnumber {
-  margin: 3px 5px 0 2px;
+  margin: 2px -5px 0 2px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortfilterdiv {
   margin: -9px 10px;
@@ -1820,7 +1827,7 @@
   padding: 6px;
 }
 .e-grid.e-wrap .e-columnmenu {
-  margin: -14px -18px -18px -18px;
+  line-height: 3px;
 }
 .e-grid.e-rtl .e-columnmenu {
   left: 5px;
@@ -1828,7 +1835,7 @@
   margin: -19px -18px -18px 1px;
 }
 .e-grid.e-wrap.e-rtl .e-columnmenu {
-  margin: -13px -13px -23px -3px;
+  line-height: 3px;
 }
 .e-grid [class^=e-] {
   box-sizing: border-box;
@@ -1852,6 +1859,15 @@
   border-top-width: 1px;
   padding: 0.3em;
 }
+.e-grid th.e-detailcell .e-rowcell,
+.e-grid th.e-detailcell .e-gridpager {
+  text-align: left;
+}
+.e-grid.e-rtl th.e-detailcell .e-rowcell, .e-grid.e-rtl th.e-detailcell .e-gridpager,
+.e-grid th.e-detailcell .e-rtl .e-rowcell,
+.e-grid th.e-detailcell .e-rtl .e-gridpager {
+  text-align: right;
+}
 .e-grid.e-verticallines .e-rowcell, .e-grid.e-verticallines .e-filterbarcell {
   border-width: 0 0 0 1px;
 }
@@ -2329,9 +2345,8 @@
       -ms-user-select: none;
           user-select: none;
 }
-.e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 9px;
-  line-height: 3;
 }
 .e-grid .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
   margin-top: 1px;
@@ -2724,6 +2739,11 @@
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
   margin: -7px;
 }
+.e-grid.e-rtl.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv, .e-grid.e-rtl .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+  height: auto;
+  margin-bottom: 2px;
+  margin-top: 0;
+}
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
   margin: -7px;
 }
@@ -2925,7 +2945,7 @@
   margin: -18px 0 -18px -11px;
   padding: 6px;
 }
-.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv {
+.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2936,17 +2956,17 @@
 .e-grid.e-wrap .e-stackedheader .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-stackedheader .e-columnheader .e-headercelldiv {
   max-height: 36px;
 }
-.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv {
+.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
   margin-bottom: 2px;
   margin-top: 0;
 }
-.e-grid.e-wrap .e-columnheader .e-filtermenudiv {
-  line-height: 18px;
+.e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
+  line-height: 3px;
 }
-.e-grid .e-columnheader.e-wrap .e-filtermenudiv {
-  line-height: 18px;
+.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
+  line-height: 3px;
 }
-.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
+.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2965,10 +2985,10 @@
   margin: -18px 5px;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -11px 24px;
+  margin: -20px 18px;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon.e-rightalign .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon.e-rightalign .e-sortfilterdiv {
-  margin: -10px 5px;
+  margin: -20px 14px;
 }
 .e-grid .e-columnheader.e-wrap .e-icon-group::before, .e-grid.e-wrap .e-columnheader .e-icon-group::before {
   display: inline-block;
@@ -3711,6 +3731,13 @@
   float: left;
 }
 
+/* stylelint-disable */
+.e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
+.e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
+  max-height: 298px !important;
+}
+
+/* stylelint-enable */
 /*! Grid theme */
 .e-grid {
   border-color: #616161;
@@ -3898,11 +3925,11 @@
 .e-grid.e-rtl .e-frozenheader.e-frozen-right-header > .e-table, .e-grid.e-rtl .e-frozencontent.e-frozen-right-content > .e-table {
   border-right-color: rgba(255, 255, 255, 0.8);
 }
-.e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: rgba(255, 255, 255, 0.18);
   color: #fff;
 }
-.e-grid tr[role=row]:hover .e-rowdragdrop {
+.e-grid .e-row:hover .e-rowdragdrop {
   cursor: move;
 }
 .e-grid .e-sortnumber {

package/styles/grid/material-dark.scss

@@ -1,21 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
-@import 'ej2-navigations/styles/pager/material-dark-definition.scss';
-@import '../excel-filter/material-dark-definition.scss';
-@import 'ej2-inputs/styles/input/material-dark-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/material-dark-definition.scss';
-@import 'ej2-buttons/styles/button/material-dark-definition.scss';
-@import 'ej2-buttons/styles/radio-button/material-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/material-dark-definition.scss';
-@import 'ej2-dropdowns/styles/auto-complete/material-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/material-dark-definition.scss';
-@import 'ej2-popups/styles/dialog/material-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/material-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/material-dark-definition.scss';
-@import 'ej2-calendars/styles/datepicker/material-dark-definition.scss';
-@import 'ej2-calendars/styles/datetimepicker/material-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/material-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/material-dark-definition.scss';
-@import 'ej2-notifications/styles/skeleton/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
+@import 'ej2-grids/styles/grid/material-dark.scss';

package/styles/grid/material.css

@@ -458,8 +458,8 @@
   min-width: 20px;
   padding: 0;
 }
-.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons,
-.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons {
+.e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons,
+.e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons {
   font-size: 18px;
 }
 .e-bigger .e-grid .e-flmenu-valuediv,
@@ -499,8 +499,8 @@
 .e-grid.e-bigger .e-icon-grightarrow {
   font-size: 12px;
 }
-.e-bigger .e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn,
-.e-grid.e-bigger .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-bigger .e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn,
+.e-grid.e-bigger .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 12px;
 }
 .e-bigger .e-grid .e-gridheader tr th:last-child,
@@ -613,6 +613,10 @@
 .e-grid.e-bigger .e-gridheader .e-fltr-icon .e-sortfilterdiv {
   margin: -15px 18px;
 }
+.e-bigger .e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv,
+.e-grid.e-bigger.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0.6em 0 1.15em;
+}
 .e-bigger .e-grid .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
 .e-bigger .e-grid .e-wrap .e-sortfilterdiv,
 .e-grid.e-bigger .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -684,11 +688,11 @@
 }
 .e-bigger .e-grid.e-rtl .e-gridheader .e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger.e-rtl .e-gridheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -15px 30px 0 0;
+  margin: -20px 30px 0 14px;
 }
 .e-bigger .e-grid.e-rtl .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger.e-rtl .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
-  margin: -16px 0;
+  margin: -20px 14px;
 }
 .e-bigger .e-grid.e-rtl .e-filtermenudiv,
 .e-grid.e-bigger.e-rtl .e-filtermenudiv {
@@ -1768,6 +1772,9 @@
 .e-grid .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
   padding: 0 1.8em 0 0.6em;
 }
+.e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
+  padding: 0 0.6em 0 0.55em;
+}
 .e-grid .e-filtermenudiv {
   float: right;
   margin: -18px -7px;
@@ -1834,10 +1841,10 @@
   margin: -16px 5px;
 }
 .e-grid.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
-  margin: 3px 2px 0 5px;
+  margin: 1px 2px 0 15px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortnumber {
-  margin: 3px 5px 0 2px;
+  margin: 2px -5px 0 2px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortfilterdiv {
   margin: -9px 10px;
@@ -1854,7 +1861,7 @@
   padding: 6px;
 }
 .e-grid.e-wrap .e-columnmenu {
-  margin: -13px -13px -23px -23px;
+  line-height: 3px;
 }
 .e-grid.e-rtl .e-columnmenu {
   left: 5px;
@@ -1862,7 +1869,7 @@
   margin: -19px -18px -18px 3px;
 }
 .e-grid.e-wrap.e-rtl .e-columnmenu {
-  margin: -13px -13px -23px -3px;
+  line-height: 3px;
 }
 .e-grid [class^=e-] {
   box-sizing: border-box;
@@ -1886,6 +1893,15 @@
   border-top-width: 1px;
   padding: 0.3em;
 }
+.e-grid th.e-detailcell .e-rowcell,
+.e-grid th.e-detailcell .e-gridpager {
+  text-align: left;
+}
+.e-grid.e-rtl th.e-detailcell .e-rowcell, .e-grid.e-rtl th.e-detailcell .e-gridpager,
+.e-grid th.e-detailcell .e-rtl .e-rowcell,
+.e-grid th.e-detailcell .e-rtl .e-gridpager {
+  text-align: right;
+}
 .e-grid.e-verticallines .e-rowcell, .e-grid.e-verticallines .e-filterbarcell {
   border-width: 0 0 0 1px;
 }
@@ -2363,9 +2379,8 @@
       -ms-user-select: none;
           user-select: none;
 }
-.e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
+.e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
   font-size: 9px;
-  line-height: 3;
 }
 .e-grid .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
   margin-top: 1px;
@@ -2758,6 +2773,11 @@
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
   margin: -7px;
 }
+.e-grid.e-rtl.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv, .e-grid.e-rtl .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+  height: auto;
+  margin-bottom: 2px;
+  margin-top: 0;
+}
 .e-grid.e-rtl .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
   margin: -7px;
 }
@@ -2959,7 +2979,7 @@
   margin: -18px 0 -18px -11px;
   padding: 6px;
 }
-.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv {
+.e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2970,17 +2990,17 @@
 .e-grid.e-wrap .e-stackedheader .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-stackedheader .e-columnheader .e-headercelldiv {
   max-height: 36px;
 }
-.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv {
+.e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
   margin-bottom: 2px;
   margin-top: 0;
 }
-.e-grid.e-wrap .e-columnheader .e-filtermenudiv {
-  line-height: 18px;
+.e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
+  line-height: 3px;
 }
-.e-grid .e-columnheader.e-wrap .e-filtermenudiv {
-  line-height: 18px;
+.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
+  line-height: 3px;
 }
-.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
+.e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
   height: Auto;
   line-height: 18px;
   overflow-wrap: break-word;
@@ -2999,10 +3019,10 @@
   margin: -18px 5px;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -11px 24px;
+  margin: -20px 18px;
 }
 .e-grid .e-columnheader.e-wrap .e-fltr-icon.e-rightalign .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon.e-rightalign .e-sortfilterdiv {
-  margin: -10px 5px;
+  margin: -20px 14px;
 }
 .e-grid .e-columnheader.e-wrap .e-icon-group::before, .e-grid.e-wrap .e-columnheader .e-icon-group::before {
   display: inline-block;
@@ -3745,6 +3765,13 @@
   float: left;
 }
 
+/* stylelint-disable */
+.e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
+.e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
+  max-height: 298px !important;
+}
+
+/* stylelint-enable */
 /*! Grid theme */
 .e-grid {
   border-color: #e0e0e0;
@@ -3932,11 +3959,11 @@
 .e-grid.e-rtl .e-frozenheader.e-frozen-right-header > .e-table, .e-grid.e-rtl .e-frozencontent.e-frozen-right-content > .e-table {
   border-right-color: #e3165b;
 }
-.e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: #eee;
   color: #000;
 }
-.e-grid tr[role=row]:hover .e-rowdragdrop {
+.e-grid .e-row:hover .e-rowdragdrop {
   cursor: move;
 }
 .e-grid .e-sortnumber {

package/styles/grid/material.scss

@@ -1,21 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
-@import 'ej2-navigations/styles/pager/material-definition.scss';
-@import '../excel-filter/material-definition.scss';
-@import 'ej2-inputs/styles/input/material-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/material-definition.scss';
-@import 'ej2-buttons/styles/button/material-definition.scss';
-@import 'ej2-buttons/styles/radio-button/material-definition.scss';
-@import 'ej2-buttons/styles/check-box/material-definition.scss';
-@import 'ej2-dropdowns/styles/auto-complete/material-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/material-definition.scss';
-@import 'ej2-popups/styles/dialog/material-definition.scss';
-@import 'ej2-popups/styles/spinner/material-definition.scss';
-@import 'ej2-popups/styles/tooltip/material-definition.scss';
-@import 'ej2-calendars/styles/datepicker/material-definition.scss';
-@import 'ej2-calendars/styles/datetimepicker/material-definition.scss';
-@import 'ej2-navigations/styles/toolbar/material-definition.scss';
-@import 'ej2-navigations/styles/context-menu/material-definition.scss';
-@import 'ej2-notifications/styles/skeleton/material-definition.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
+@import 'ej2-grids/styles/grid/material.scss';