@syncfusion/ej2-angular-grids 20.1.60 → 20.2.36

package/styles/grid/material-dark.css

@@ -376,6 +376,26 @@
 .e-grid.e-bigger .e-row .e-icon-rowdragicon::before {
   font-size: 10px;
 }
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper {
+  padding: 5px;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search {
+  width: 100%;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon {
+  margin: 10px 14px 5px 0;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 18px;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
+  padding-left: 0;
+}
 .e-bigger .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper,
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 8px;
@@ -385,6 +405,22 @@
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
   min-width: 20px;
 }
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0 8px 0 0;
+  min-width: 20px;
+  padding: 0;
+}
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 12px;
+}
+.e-bigger .e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 6px 0 5px 6px;
+  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 {
   font-size: 18px;
@@ -1036,6 +1072,10 @@
 .e-grid.e-rtl .e-dropitemscount {
   left: -6px !important;
 }
+.e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 0;
+  margin: 4px 0 4px 6px;
+}
 .e-grid.e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop, .e-grid.e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop {
   border-top: 1px solid #616161;
   border-right: 1px solid #616161;
@@ -1092,6 +1132,14 @@
   border-top: 1px solid #616161;
   border-radius: 0;
 }
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 0;
+  min-width: 18px;
+  margin-right: 8px;
+}
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 12px;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #616161;
@@ -1099,7 +1147,7 @@
 .e-grid .e-res-toolbar .e-toolbar-items {
   min-height: initial;
 }
-.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-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-icons {
@@ -1140,13 +1188,25 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 0;
 }
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 14px 8px 5px 0;
+}
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 18px;
+}
 .e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 26px;
 }
+.e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 14px 0 5px 8px;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 6px;
   padding-top: 1px;
 }
+.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search:focus {
+  opacity: 1;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
   margin-bottom: 0;
   opacity: 0.6;

package/styles/grid/material-dark.scss

@@ -1 +1,20 @@
-@import 'ej2-grids/styles/grid/material-dark.scss';
+@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 'material-dark-definition.scss';
+@import 'icons/material-dark.scss';
+@import 'all.scss';

package/styles/grid/material.css

@@ -410,6 +410,26 @@
 .e-grid.e-bigger .e-row .e-icon-rowdragicon::before {
   font-size: 10px;
 }
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper {
+  padding: 5px;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search {
+  width: 100%;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon {
+  margin: 13px 14px 5px 0;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 17px;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
+  padding-left: 0;
+}
 .e-bigger .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper,
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 8px;
@@ -419,6 +439,22 @@
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
   min-width: 20px;
 }
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0 8px 0 0;
+  min-width: 20px;
+  padding: 0;
+}
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 12px;
+}
+.e-bigger .e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 6px 0 5px 6px;
+  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 {
   font-size: 18px;
@@ -1070,6 +1106,10 @@
 .e-grid.e-rtl .e-dropitemscount {
   left: -6px !important;
 }
+.e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 0;
+  margin: 4px 0 4px 6px;
+}
 .e-grid.e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop, .e-grid.e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop {
   border-top: 1px solid #e0e0e0;
   border-right: 1px solid #e0e0e0;
@@ -1126,6 +1166,14 @@
   border-top: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 0;
+  min-width: 18px;
+  margin-right: 8px;
+}
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 12px;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #e0e0e0;
@@ -1133,7 +1181,7 @@
 .e-grid .e-res-toolbar .e-toolbar-items {
   min-height: initial;
 }
-.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-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-icons {
@@ -1174,13 +1222,25 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 0;
 }
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 14px 8px 5px 0;
+}
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 18px;
+}
 .e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 26px;
 }
+.e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 14px 0 5px 8px;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 6px;
   padding-top: 1px;
 }
+.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search:focus {
+  opacity: 1;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
   margin-bottom: 0;
   opacity: 0.6;

package/styles/grid/material.scss

@@ -1 +1,20 @@
-@import 'ej2-grids/styles/grid/material.scss';
+@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 'material-definition.scss';
+@import 'icons/material.scss';
+@import 'all.scss';

package/styles/grid/tailwind-dark.css

@@ -362,6 +362,26 @@
 .e-grid.e-bigger .e-row .e-icon-rowdragicon::before {
   font-size: 16px;
 }
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper {
+  padding: 3px 16px 3px 0;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search {
+  width: 100%;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon {
+  margin: 0;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 16px;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
+  padding-left: 0;
+}
 .e-bigger .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper,
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 3px;
@@ -371,6 +391,22 @@
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
   min-width: 38px;
 }
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+  min-width: 38px;
+  padding: 7px 0 7px 12px;
+}
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 22px;
+}
+.e-bigger .e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+  min-width: 38px;
+  padding: 7px 6px 7px 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 {
   font-size: 16px;
@@ -1072,6 +1108,10 @@
 .e-grid.e-rtl .e-dropitemscount {
   left: -6px !important;
 }
+.e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 5px 4px 5px 0;
+  margin: 0;
+}
 .e-grid.e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop, .e-grid.e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop {
   border-top: 1px solid #4b5563;
   border-right: 1px solid #4b5563;
@@ -1128,6 +1168,14 @@
   border-top: 1px solid #4b5563;
   border-radius: 0;
 }
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 5px 0 5px 4px;
+  min-width: 33px;
+  margin-right: 0;
+}
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 18px;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #4b5563;
@@ -1135,7 +1183,7 @@
 .e-grid .e-res-toolbar .e-toolbar-items {
   min-height: initial;
 }
-.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-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-icons {
@@ -1177,13 +1225,25 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 0;
 }
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+}
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 16px;
+}
 .e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 26px;
 }
+.e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 3px;
   padding-top: 3px;
 }
+.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search:focus {
+  opacity: 1;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
   margin-bottom: 0;
   opacity: 0.6;

package/styles/grid/tailwind-dark.scss

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

package/styles/grid/tailwind.css

@@ -362,6 +362,26 @@
 .e-grid.e-bigger .e-row .e-icon-rowdragicon::before {
   font-size: 16px;
 }
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper {
+  padding: 3px 16px 3px 0;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input.e-search {
+  width: 100%;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-input-group-icon.e-icons.e-sicon.e-clear-icon {
+  margin: 0;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 16px;
+}
+.e-bigger .e-grid .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon,
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
+  padding-left: 0;
+}
 .e-bigger .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper,
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 3px;
@@ -371,6 +391,22 @@
 .e-grid.e-bigger .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search .e-search-icon {
   min-width: 38px;
 }
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+  min-width: 38px;
+  padding: 7px 0 7px 12px;
+}
+.e-bigger .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before,
+.e-grid.e-bigger .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 22px;
+}
+.e-bigger .e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon,
+.e-grid.e-bigger.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+  min-width: 38px;
+  padding: 7px 6px 7px 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 {
   font-size: 16px;
@@ -1072,6 +1108,10 @@
 .e-grid.e-rtl .e-dropitemscount {
   left: -6px !important;
 }
+.e-grid.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 5px 4px 5px 0;
+  margin: 0;
+}
 .e-grid.e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop, .e-grid.e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop {
   border-top: 1px solid #e5e7eb;
   border-right: 1px solid #e5e7eb;
@@ -1128,6 +1168,14 @@
   border-top: 1px solid #e5e7eb;
   border-radius: 0;
 }
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon {
+  padding: 5px 0 5px 4px;
+  min-width: 33px;
+  margin-right: 0;
+}
+.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 18px;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #e5e7eb;
@@ -1135,7 +1183,7 @@
 .e-grid .e-res-toolbar .e-toolbar-items {
   min-height: initial;
 }
-.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-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-icons {
@@ -1177,13 +1225,25 @@
 .e-grid .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 0;
 }
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+}
+.e-grid.e-bigger .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon::before {
+  font-size: 16px;
+}
 .e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
   padding-left: 26px;
 }
+.e-grid.e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper .e-sicon.e-clear-icon {
+  margin: 0;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper {
   padding-bottom: 3px;
   padding-top: 3px;
 }
+.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search:focus {
+  opacity: 1;
+}
 .e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
   margin-bottom: 0;
   opacity: 0.6;

package/styles/grid/tailwind.scss

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