@syncfusion/ej2-angular-grids 21.2.10 → 22.1.34

package/styles/grid/material-dark.css

@@ -577,7 +577,7 @@
 }
 .e-bigger .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger .e-gridheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -15px 18px;
+  margin: -15px 24px;
 }
 .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 {
@@ -654,19 +654,19 @@
 }
 .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: -20px 30px 0 14px;
+  margin: -17px 30px 0 8px;
 }
 .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: -20px 14px;
+  margin: -17px 10px;
 }
 .e-bigger .e-grid.e-rtl .e-filtermenudiv,
 .e-grid.e-bigger.e-rtl .e-filtermenudiv {
-  margin: -18px 0 -18px -11px;
+  margin: -20px 0 -18px -11px;
 }
 .e-bigger .e-grid.e-rtl .e-rightalign .e-filtermenudiv,
 .e-grid.e-bigger.e-rtl .e-rightalign .e-filtermenudiv {
-  margin: -18px 0 -18px -11px;
+  margin: -20px 0 -18px -11px;
 }
 .e-bigger .e-grid.e-rtl .e-headercell .e-headercelldiv .e-sortnumber, .e-bigger .e-grid.e-rtl .e-detailheadercell .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-headercell .e-headercelldiv .e-sortnumber,
@@ -739,7 +739,11 @@
 .e-bigger .e-grid.e-bigger .e-columnmenu,
 .e-grid.e-bigger.e-bigger .e-columnmenu {
   bottom: 16px;
-  margin: -18 -7px;
+  margin: -18.5px -18px;
+}
+.e-bigger .e-grid.e-device .e-columnmenu,
+.e-grid.e-bigger.e-device .e-columnmenu {
+  margin: -17px;
 }
 .e-bigger .e-grid .e-columnmenu,
 .e-grid.e-bigger .e-columnmenu {
@@ -804,7 +808,7 @@
 }
 .e-bigger .e-grid.e-device .e-headercell,
 .e-grid.e-bigger.e-device .e-headercell {
-  padding: 0 12px 0;
+  padding: 0 22px 0;
 }
 .e-bigger .e-grid.e-device .e-headercell:first-child,
 .e-grid.e-bigger.e-device .e-headercell:first-child {
@@ -848,7 +852,7 @@
 }
 .e-bigger .e-grid.e-device .e-groupheadercell .e-ungroupbutton,
 .e-grid.e-bigger.e-device .e-groupheadercell .e-ungroupbutton {
-  line-height: 33px;
+  line-height: 30px;
 }
 .e-bigger .e-grid.e-device .e-normaledit .e-rowcell,
 .e-grid.e-bigger.e-device .e-normaledit .e-rowcell {
@@ -892,9 +896,9 @@
 .e-grid.e-bigger span.e-ungroupbutton.e-icons {
   font-size: 16px;
   margin-left: 0;
+  padding-top: 0;
   margin-top: 0;
   margin-right: 0;
-  padding-top: 0;
 }
 .e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
 .e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
@@ -1034,7 +1038,6 @@
       -ms-user-select: none;
           user-select: none;
 }
-
 .e-grid {
   border-radius: 0;
   border-style: none solid solid;
@@ -1430,6 +1433,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1525,7 +1529,7 @@
   text-align: left;
 }
 .e-grid.e-device .e-headercell {
-  padding: 0 12px 0;
+  padding: 0 22px 0;
 }
 .e-grid.e-device .e-headercell:first-child {
   padding: 0 12px 0 16px;
@@ -1836,7 +1840,7 @@
   position: absolute;
   right: 23px;
   float: right;
-  margin: -18px;
+  margin: -18.5px -18px;
   padding: 6px;
 }
 .e-grid.e-wrap .e-columnmenu {
@@ -2051,12 +2055,22 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-grid .e-lastsummarycell {
+.e-grid .e-footerpadding .e-lastsummarycell {
+  border-left: none;
   border-right: 1px solid;
 }
+.e-grid.e-rtl .e-footerpadding tr.e-summaryrow td.e-lastsummarycell:last-child {
+  border-right: none;
+  border-left: 1px solid #616161;
+}
 .e-grid .e-footerpadding {
+  padding-left: 0;
   padding-right: 14px;
 }
+.e-grid.e-rtl .e-footerpadding {
+  padding-left: 14px;
+  padding-right: 0;
+}
 .e-grid .e-gridpopup span {
   border: 1px solid transparent;
   cursor: pointer;
@@ -2172,6 +2186,7 @@
 .e-grid td.e-active {
   font-weight: normal;
 }
+.e-grid:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
 .e-grid td.e-cellselectionbackground {
   font-weight: normal;
 }
@@ -2266,7 +2281,10 @@
   line-height: 26px;
 }
 .e-grid.e-device .e-groupheadercell .e-ungroupbutton {
-  line-height: 28px;
+  line-height: 25px;
+}
+.e-grid.e-device .e-groupheadercell .e-groupsort {
+  margin-top: 0;
 }
 .e-grid .e-groupheadercell .e-cancel {
   padding-right: 10px;
@@ -3198,10 +3216,18 @@
   padding-left: 0;
   padding-right: 6px;
 }
+.e-bigger .e-grid .e-columnmenu,
+.e-bigger.e-grid .e-columnmenu {
+  margin: -18.5px -18px;
+}
 .e-bigger .e-grid.e-rtl .e-columnmenu,
 .e-bigger.e-grid.e-rtl .e-columnmenu {
   margin: -19px -18px -18px 1px;
 }
+.e-bigger .e-grid.e-rtl.e-device .e-columnmenu,
+.e-bigger.e-grid.e-rtl.e-device .e-columnmenu {
+  margin: -19px -18px -18px 1px;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell span,
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0;
@@ -3509,9 +3535,9 @@
 }
 .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;
   width: 100%;
+  font-weight: 500;
 }
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn {
@@ -3820,6 +3846,8 @@
 }
 .e-grid .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
 .e-grid .e-gridcontent .e-rowcell.e-dragborder,
+.e-grid .e-gridcontent .e-groupcaption.e-dragborder,
+.e-grid .e-gridcontent .e-summarycell.e-dragborder,
 .e-grid .e-gridcontent .e-rowdragdrop.e-dragborder, .e-grid .e-gridheader thead tr th.e-firstrowdragborder, .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder, .e-grid.e-rtl .e-gridcontent .e-rowcell.e-dragborder, .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
   box-shadow: 0 2px 0 0 #00b0ff;
   position: relative;
@@ -3896,7 +3924,8 @@
 .e-grid .e-summaryrow .e-summarycell,
 .e-grid .e-summaryrow .e-templatecell,
 .e-grid .e-summarycontent .e-indentcell,
-.e-grid .e-indentcell.e-detailindentcelltop {
+.e-grid .e-indentcell.e-detailindentcelltop,
+.e-grid .e-groupfooterrow.e-summaryrow .e-indentcell.e-indentcelltop {
   background-color: #424242;
   border-color: #616161;
   color: rgba(255, 255, 255, 0.7);

package/styles/grid/material.css

@@ -611,7 +611,7 @@
 }
 .e-bigger .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger .e-gridheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -15px 18px;
+  margin: -15px 24px;
 }
 .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 {
@@ -688,33 +688,33 @@
 }
 .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: -20px 30px 0 14px;
+  margin: -17px 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: -20px 14px;
+  margin: -17px 14px;
 }
 .e-bigger .e-grid.e-rtl .e-filtermenudiv,
 .e-grid.e-bigger.e-rtl .e-filtermenudiv {
-  margin: -18px 0 -18px -11px;
+  margin: -20px 0 -18px -11px;
 }
 .e-bigger .e-grid.e-rtl .e-rightalign .e-filtermenudiv,
 .e-grid.e-bigger.e-rtl .e-rightalign .e-filtermenudiv {
-  margin: -18px 0 -18px -11px;
+  margin: -20px 0 -18px -11px;
 }
 .e-bigger .e-grid.e-rtl .e-headercell .e-headercelldiv .e-sortnumber, .e-bigger .e-grid.e-rtl .e-detailheadercell .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-headercell .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-detailheadercell .e-headercelldiv .e-sortnumber {
-  margin: 6px 0 0 5px;
+  margin: 6px 0 0 10px;
 }
 .e-bigger .e-grid.e-rtl .e-headercell.e-rightalign .e-headercelldiv .e-sortnumber, .e-bigger .e-grid.e-rtl .e-detailheadercell.e-rightalign .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-headercell.e-rightalign .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-detailheadercell.e-rightalign .e-headercelldiv .e-sortnumber {
-  margin: 6px 0 0 5px;
+  margin: 6px 0 0 10px;
 }
 .e-bigger .e-grid.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
-  margin: 6px 0 0 5px;
+  margin: 6px 0 0 10px;
 }
 .e-bigger .e-grid .e-rowcell,
 .e-bigger .e-grid .e-summarycell,
@@ -773,7 +773,11 @@
 .e-bigger .e-grid.e-bigger .e-columnmenu,
 .e-grid.e-bigger.e-bigger .e-columnmenu {
   bottom: 16px;
-  margin: -18 -7px;
+  margin: -18.5px -18px;
+}
+.e-bigger .e-grid.e-device .e-columnmenu,
+.e-grid.e-bigger.e-device .e-columnmenu {
+  margin: -18px;
 }
 .e-bigger .e-grid .e-columnmenu,
 .e-grid.e-bigger .e-columnmenu {
@@ -838,7 +842,7 @@
 }
 .e-bigger .e-grid.e-device .e-headercell,
 .e-grid.e-bigger.e-device .e-headercell {
-  padding: 0 12px 0;
+  padding: 0 21px 0;
 }
 .e-bigger .e-grid.e-device .e-headercell:first-child,
 .e-grid.e-bigger.e-device .e-headercell:first-child {
@@ -882,7 +886,7 @@
 }
 .e-bigger .e-grid.e-device .e-groupheadercell .e-ungroupbutton,
 .e-grid.e-bigger.e-device .e-groupheadercell .e-ungroupbutton {
-  line-height: 33px;
+  line-height: 30px;
 }
 .e-bigger .e-grid.e-device .e-normaledit .e-rowcell,
 .e-grid.e-bigger.e-device .e-normaledit .e-rowcell {
@@ -926,9 +930,9 @@
 .e-grid.e-bigger span.e-ungroupbutton.e-icons {
   font-size: 16px;
   margin-left: 0;
+  padding-top: 0;
   margin-top: 0;
   margin-right: 0;
-  padding-top: 0;
 }
 .e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
 .e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
@@ -1068,7 +1072,6 @@
       -ms-user-select: none;
           user-select: none;
 }
-
 .e-grid {
   border-radius: 0;
   border-style: none solid solid;
@@ -1464,6 +1467,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1559,7 +1563,7 @@
   text-align: left;
 }
 .e-grid.e-device .e-headercell {
-  padding: 0 12px 0;
+  padding: 0 21px 0;
 }
 .e-grid.e-device .e-headercell:first-child {
   padding: 0 12px 0 16px;
@@ -1790,7 +1794,7 @@
 }
 .e-grid .e-filtermenudiv {
   float: right;
-  margin: -18px -7px;
+  margin: -19px -7px;
   padding: 6px;
   text-align: right;
 }
@@ -1837,11 +1841,11 @@
   width: 15px;
 }
 .e-grid .e-gridheader .e-fltr-icon .e-sortnumber {
-  margin: 7px -3px 0 2px;
+  margin: 7px 5px 0 2px;
 }
 .e-grid .e-gridheader .e-rightalign.e-fltr-icon .e-sortnumber {
   float: left;
-  margin: 7px 2px 0 5px;
+  margin: 7px 2px 0 10px;
 }
 .e-grid .e-gridheader .e-rightalign .e-sortnumber {
   float: left;
@@ -1870,7 +1874,7 @@
   position: absolute;
   right: 23px;
   float: right;
-  margin: -18px;
+  margin: -18.5px -18px;
   padding: 6px;
 }
 .e-grid.e-wrap .e-columnmenu {
@@ -1879,7 +1883,7 @@
 .e-grid.e-rtl .e-columnmenu {
   left: 5px;
   right: auto;
-  margin: -19px -18px -18px 3px;
+  margin: -18px -18px -18px 3px;
 }
 .e-grid.e-wrap.e-rtl .e-columnmenu {
   line-height: 3px;
@@ -2085,12 +2089,22 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-grid .e-lastsummarycell {
+.e-grid .e-footerpadding .e-lastsummarycell {
+  border-left: none;
   border-right: 1px solid;
 }
+.e-grid.e-rtl .e-footerpadding tr.e-summaryrow td.e-lastsummarycell:last-child {
+  border-right: none;
+  border-left: 1px solid #e0e0e0;
+}
 .e-grid .e-footerpadding {
+  padding-left: 0;
   padding-right: 14px;
 }
+.e-grid.e-rtl .e-footerpadding {
+  padding-left: 14px;
+  padding-right: 0;
+}
 .e-grid .e-gridpopup span {
   border: 1px solid transparent;
   cursor: pointer;
@@ -2206,6 +2220,7 @@
 .e-grid td.e-active {
   font-weight: normal;
 }
+.e-grid:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
 .e-grid td.e-cellselectionbackground {
   font-weight: normal;
 }
@@ -2300,7 +2315,10 @@
   line-height: 26px;
 }
 .e-grid.e-device .e-groupheadercell .e-ungroupbutton {
-  line-height: 28px;
+  line-height: 25px;
+}
+.e-grid.e-device .e-groupheadercell .e-groupsort {
+  margin-top: 0;
 }
 .e-grid .e-groupheadercell .e-cancel {
   padding-right: 10px;
@@ -2711,7 +2729,7 @@
 .e-grid.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv.e-headerchkcelldiv .e-sortnumber, .e-grid.e-rtl .e-detailheadercell.e-fltr-icon .e-headercelldiv .e-sortnumber,
 .e-grid.e-rtl .e-detailheadercell.e-fltr-icon .e-headercelldiv.e-headerchkcelldiv .e-sortnumber {
   float: left;
-  margin: 6px 0 0 5px;
+  margin: 7px 0 0 5px;
 }
 .e-grid.e-rtl .e-headercell .e-headercelldiv,
 .e-grid.e-rtl .e-headercell .e-headercelldiv.e-headerchkcelldiv, .e-grid.e-rtl .e-detailheadercell .e-headercelldiv,
@@ -2723,7 +2741,7 @@
 .e-grid.e-rtl .e-headercell .e-headercelldiv.e-headerchkcelldiv .e-sortnumber, .e-grid.e-rtl .e-detailheadercell .e-headercelldiv .e-sortnumber,
 .e-grid.e-rtl .e-detailheadercell .e-headercelldiv.e-headerchkcelldiv .e-sortnumber {
   float: left;
-  margin: 6px 0 0 5px;
+  margin: 7px 0 0 5px;
 }
 .e-grid.e-rtl .e-headercell .e-filterbarcell input, .e-grid.e-rtl .e-detailheadercell .e-filterbarcell input {
   border-width: 0 0 2px 0;
@@ -2754,11 +2772,11 @@
 }
 .e-grid.e-rtl .e-headercell.e-fltr-icon.e-rightalign .e-sortnumber, .e-grid.e-rtl .e-detailheadercell.e-fltr-icon.e-rightalign .e-sortnumber {
   float: left;
-  margin: 6px 0 0 5px;
+  margin: 7px 0 0 5px;
 }
 .e-grid.e-rtl .e-headercell.e-rightalign .e-sortnumber, .e-grid.e-rtl .e-detailheadercell.e-rightalign .e-sortnumber {
   float: left;
-  margin: 6px 0 0 5px;
+  margin: 7px 0 0 5px;
 }
 .e-grid.e-rtl .e-rowcell:first-child,
 .e-grid.e-rtl .e-summarycell:first-child {
@@ -2993,7 +3011,7 @@
 }
 .e-grid.e-rtl .e-filtermenudiv {
   float: left;
-  margin: -18px 0 -18px -11px;
+  margin: -19px 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-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -3232,10 +3250,18 @@
   padding-left: 0;
   padding-right: 6px;
 }
+.e-bigger .e-grid .e-columnmenu,
+.e-bigger.e-grid .e-columnmenu {
+  margin: -18.5px -18px;
+}
 .e-bigger .e-grid.e-rtl .e-columnmenu,
 .e-bigger.e-grid.e-rtl .e-columnmenu {
   margin: -19px -18px -18px 3px;
 }
+.e-bigger .e-grid.e-rtl.e-device .e-columnmenu,
+.e-bigger.e-grid.e-rtl.e-device .e-columnmenu {
+  margin: -19px -18px -18px 3px;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell span,
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0;
@@ -3543,9 +3569,9 @@
 }
 .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;
   width: 100%;
+  font-weight: 500;
 }
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn {
@@ -3854,6 +3880,8 @@
 }
 .e-grid .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
 .e-grid .e-gridcontent .e-rowcell.e-dragborder,
+.e-grid .e-gridcontent .e-groupcaption.e-dragborder,
+.e-grid .e-gridcontent .e-summarycell.e-dragborder,
 .e-grid .e-gridcontent .e-rowdragdrop.e-dragborder, .e-grid .e-gridheader thead tr th.e-firstrowdragborder, .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder, .e-grid.e-rtl .e-gridcontent .e-rowcell.e-dragborder, .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
   box-shadow: 0 2px 0 0 #e3165b;
   position: relative;
@@ -3930,7 +3958,8 @@
 .e-grid .e-summaryrow .e-summarycell,
 .e-grid .e-summaryrow .e-templatecell,
 .e-grid .e-summarycontent .e-indentcell,
-.e-grid .e-indentcell.e-detailindentcelltop {
+.e-grid .e-indentcell.e-detailindentcelltop,
+.e-grid .e-groupfooterrow.e-summaryrow .e-indentcell.e-indentcelltop {
   background-color: #f6f6f6;
   border-color: #e0e0e0;
   color: rgba(0, 0, 0, 0.54);