feat(grid): adding styles for column expander

Signed-off-by: MPopov <[email protected]>

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -205,6 +205,18 @@
         @extend %grid-cell-header !optional;
     }
 
+    @include e(th-expander) {
+        @extend %igx-grid__th-expander !optional
+    }
+
+    @include e(th-group-title) {
+        @extend %igx-grid__th-group-title !optional
+    }
+
+    @include e(th, $m: collapsible) {
+        @extend %igx-grid__th--collapsible !optional;
+    }
+
     @include e(th, $m: sortable) {
         @extend %igx-grid__th--sortable !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1335,6 +1335,33 @@
         }
     }
 
+
+    %igx-grid__th-expander {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: rem(8px);
+        cursor: pointer;
+
+        igx-icon {
+            color: --var($theme, 'expand-icon-color');
+        }
+
+        &:hover {
+            igx-icon {
+                color: --var($theme, 'expand-icon-hover-color');
+            }
+        }
+    }
+
+    %igx-grid__th-group-title {
+        @include ellipsis();
+    }
+
+    %igx-grid__th--collapsible {
+        justify-content: normal;
+    }
+
     %igx-grid__th--sortable {
         &:hover {
             cursor: pointer;

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -20,8 +20,9 @@
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right"></span>
 </ng-container>
 
+
 <ng-template #defaultColumn>
-    <span [attr.title]="column.header">{{column.header}}</span>
+    <span class="igx-grid__th-group-title" [attr.title]="column.header">{{column.header}}</span>
 </ng-template>
 
 <ng-template #defaultCollapseIndicator>
@@ -42,7 +43,7 @@
         [attr.droppable]="true"
         [igxColumnMovingDrop]="column">
         <ng-container *ngIf="column.collapsible">
-            <div (click)="column.expand = !column.expand">
+            <div class="igx-grid__th-expander" (click)="column.expand = !column.expand">
                 <ng-container
                     *ngTemplateOutlet="column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}">
                 </ng-container>