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

package/styles/grid/fluent-dark.css

@@ -380,7 +380,7 @@
 }
 
 .e-device .e-flmenu-valuediv {
-  padding: 24px 0 0;
+  padding: 23px 0 1px;
 }
 
 .e-bigger .e-grid,
@@ -441,13 +441,13 @@
   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: 16px;
 }
 .e-bigger .e-grid .e-flmenu-valuediv,
 .e-grid.e-bigger .e-flmenu-valuediv {
-  padding: 16px 0 0;
+  padding: 15px 0 1px;
 }
 .e-bigger .e-grid .e-headercell,
 .e-grid.e-bigger .e-headercell {
@@ -482,8 +482,8 @@
 .e-grid.e-bigger .e-icon-grightarrow {
   font-size: 22px;
 }
-.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: 18px;
 }
 .e-bigger .e-grid .e-gridheader tr th:last-child,
@@ -959,7 +959,7 @@
 .e-bigger .e-grid .e-ccdlg .e-dlg-content,
 .e-grid.e-bigger .e-ccdlg .e-dlg-content {
   margin: 40px 0 0;
-  padding: 28px;
+  padding: 28px 28px 0 28px;
 }
 .e-bigger .e-grid .e-ccdlg .e-ccul-ele,
 .e-grid.e-bigger .e-ccdlg .e-ccul-ele {
@@ -1820,7 +1820,7 @@
   top: -1000px;
 }
 .e-grid .e-flmenu-valuediv {
-  padding: 14px 0 0;
+  padding: 13px 0 1px;
 }
 .e-grid .e-flbldcontent {
   padding: 18px 18px 0;
@@ -1909,6 +1909,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;
 }
@@ -2390,9 +2399,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: 16px;
-  line-height: 3;
 }
 .e-grid .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
   margin-top: 2px;
@@ -2491,7 +2499,7 @@
 .e-grid .e-ccdlg .e-dlg-content {
   margin: 40px 0 0;
   overflow: visible;
-  padding: 24px;
+  padding: 24px 24px 0 24px;
 }
 .e-grid .e-ccdlg .e-checkbox-wrapper.e-control.e-keyboard {
   padding-left: 8px;
@@ -3010,7 +3018,7 @@
 .e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
   line-height: 10px;
 }
-.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
+.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
   line-height: 10px;
 }
 .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 {
@@ -3359,6 +3367,27 @@
   position: relative;
 }
 
+.e-ccdlg.e-cc .e-dlg-header-content {
+  padding: 11px 24px 13px;
+}
+
+.e-filter-popup.e-excelfilter .e-dlg-content {
+  padding-bottom: 12px;
+}
+
+.e-bigger .e-edit-dialog.e-dlg-modal .e-dlg-header-content {
+  padding: 13px 20px 27px 28px;
+}
+.e-bigger .e-edit-dialog.e-dlg-modal .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
+  bottom: 4px;
+}
+.e-bigger .e-ccdlg.e-cc .e-dlg-header-content {
+  padding: 14px 28px 17px;
+}
+.e-bigger .e-filter-popup.e-excelfilter .e-dlg-content {
+  padding-bottom: 0;
+}
+
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-tbar-btn:hover,
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active,
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus,
@@ -3525,6 +3554,7 @@
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
   float: left;
+  padding-top: 6px;
   padding-left: 0;
   padding-right: 40px;
 }
@@ -3540,7 +3570,7 @@
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-dlg-custom-header,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-dlg-custom-header {
   font-weight: 500;
-  padding-top: 5px;
+  padding-top: 2px;
   width: 100%;
 }
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn,
@@ -3585,7 +3615,7 @@
   background: none;
   box-shadow: none;
   padding-left: 0;
-  padding-top: 5px;
+  padding-top: 6px;
 }
 .e-bigger .e-responsive-dialog.e-rtl .e-dlg-header-content .e-res-back-btn,
 .e-bigger.e-responsive-dialog.e-rtl .e-dlg-header-content .e-res-back-btn {
@@ -3779,6 +3809,7 @@
 .e-bigger .e-responsive-dialog.e-rtl .e-btn.e-dlg-closeicon-btn,
 .e-bigger.e-responsive-dialog.e-rtl .e-btn.e-dlg-closeicon-btn {
   float: right;
+  padding-top: 6px;
   padding-left: 40px;
   padding-right: 0;
 }
@@ -3792,6 +3823,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: #292827;
@@ -3979,11 +4017,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: #292827;
 }
-.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):not(.e-detailrow):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):not(.e-detailrow):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: #252423;
   color: #f3f2f1;
 }
-.e-grid tr[role=row]:hover .e-rowdragdrop {
+.e-grid .e-row:hover .e-rowdragdrop {
   cursor: move;
 }
 .e-grid .e-sortnumber {

package/styles/grid/fluent.css

@@ -380,7 +380,7 @@
 }
 
 .e-device .e-flmenu-valuediv {
-  padding: 24px 0 0;
+  padding: 23px 0 1px;
 }
 
 .e-bigger .e-grid,
@@ -441,13 +441,13 @@
   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: 16px;
 }
 .e-bigger .e-grid .e-flmenu-valuediv,
 .e-grid.e-bigger .e-flmenu-valuediv {
-  padding: 16px 0 0;
+  padding: 15px 0 1px;
 }
 .e-bigger .e-grid .e-headercell,
 .e-grid.e-bigger .e-headercell {
@@ -482,8 +482,8 @@
 .e-grid.e-bigger .e-icon-grightarrow {
   font-size: 22px;
 }
-.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: 18px;
 }
 .e-bigger .e-grid .e-gridheader tr th:last-child,
@@ -959,7 +959,7 @@
 .e-bigger .e-grid .e-ccdlg .e-dlg-content,
 .e-grid.e-bigger .e-ccdlg .e-dlg-content {
   margin: 40px 0 0;
-  padding: 28px;
+  padding: 28px 28px 0 28px;
 }
 .e-bigger .e-grid .e-ccdlg .e-ccul-ele,
 .e-grid.e-bigger .e-ccdlg .e-ccul-ele {
@@ -1820,7 +1820,7 @@
   top: -1000px;
 }
 .e-grid .e-flmenu-valuediv {
-  padding: 14px 0 0;
+  padding: 13px 0 1px;
 }
 .e-grid .e-flbldcontent {
   padding: 18px 18px 0;
@@ -1909,6 +1909,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;
 }
@@ -2390,9 +2399,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: 16px;
-  line-height: 3;
 }
 .e-grid .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
   margin-top: 2px;
@@ -2491,7 +2499,7 @@
 .e-grid .e-ccdlg .e-dlg-content {
   margin: 40px 0 0;
   overflow: visible;
-  padding: 24px;
+  padding: 24px 24px 0 24px;
 }
 .e-grid .e-ccdlg .e-checkbox-wrapper.e-control.e-keyboard {
   padding-left: 8px;
@@ -3010,7 +3018,7 @@
 .e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
   line-height: 10px;
 }
-.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
+.e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
   line-height: 10px;
 }
 .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 {
@@ -3359,6 +3367,27 @@
   position: relative;
 }
 
+.e-ccdlg.e-cc .e-dlg-header-content {
+  padding: 11px 24px 13px;
+}
+
+.e-filter-popup.e-excelfilter .e-dlg-content {
+  padding-bottom: 12px;
+}
+
+.e-bigger .e-edit-dialog.e-dlg-modal .e-dlg-header-content {
+  padding: 13px 20px 27px 28px;
+}
+.e-bigger .e-edit-dialog.e-dlg-modal .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
+  bottom: 4px;
+}
+.e-bigger .e-ccdlg.e-cc .e-dlg-header-content {
+  padding: 14px 28px 17px;
+}
+.e-bigger .e-filter-popup.e-excelfilter .e-dlg-content {
+  padding-bottom: 0;
+}
+
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-tbar-btn:hover,
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-tbar-btn:active,
 .e-bigger .e-grid.e-row-responsive .e-toolbar .e-tbar-btn:focus,
@@ -3525,6 +3554,7 @@
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
   float: left;
+  padding-top: 6px;
   padding-left: 0;
   padding-right: 40px;
 }
@@ -3540,7 +3570,7 @@
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-dlg-custom-header,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-dlg-custom-header {
   font-weight: 500;
-  padding-top: 5px;
+  padding-top: 2px;
   width: 100%;
 }
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn,
@@ -3585,7 +3615,7 @@
   background: none;
   box-shadow: none;
   padding-left: 0;
-  padding-top: 5px;
+  padding-top: 6px;
 }
 .e-bigger .e-responsive-dialog.e-rtl .e-dlg-header-content .e-res-back-btn,
 .e-bigger.e-responsive-dialog.e-rtl .e-dlg-header-content .e-res-back-btn {
@@ -3779,6 +3809,7 @@
 .e-bigger .e-responsive-dialog.e-rtl .e-btn.e-dlg-closeicon-btn,
 .e-bigger.e-responsive-dialog.e-rtl .e-btn.e-dlg-closeicon-btn {
   float: right;
+  padding-top: 6px;
   padding-left: 40px;
   padding-right: 0;
 }
@@ -3792,6 +3823,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: #edebe9;
@@ -3979,11 +4017,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: #edebe9;
 }
-.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):not(.e-detailrow):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):not(.e-detailrow):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: #f3f2f1;
   color: #201f1e;
 }
-.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-light.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,
@@ -1763,10 +1763,10 @@
   margin: -21px 0 0 8px;
 }
 .e-grid.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
-  margin: 1px 2px 0 5px;
+  margin: 3px 2px 0 5px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortnumber {
-  margin: 3px 5px 0 2px;
+  margin: 1px 2px 0 2px;
 }
 .e-grid.e-wrap .e-gridheader .e-sortfilterdiv {
   margin: -15px -5px;
@@ -1815,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;
 }
@@ -2292,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: 3px;
@@ -2911,7 +2919,7 @@
 .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-sortfilterdiv.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-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 {
@@ -3679,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: #757575;
@@ -3866,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: #400074;
 }
-.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):not(.e-detailrow):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):not(.e-detailrow):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: #ecf;
   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/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,
@@ -1815,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;
 }
@@ -2292,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;
@@ -2911,7 +2919,7 @@
 .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-sortfilterdiv.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-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 {
@@ -3679,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;
@@ -3866,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):not(.e-detailrow):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):not(.e-detailrow):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/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,
@@ -1859,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;
 }
@@ -2336,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;
@@ -2955,7 +2963,7 @@
 .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, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
+.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-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 {
@@ -3723,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;
@@ -3910,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):not(.e-detailrow):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):not(.e-detailrow):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 {