chore(*): Renaming directive selectors so that they represent component state (igxRowExpandedIndicator/igxRowCollapsedIndicator and igxHeaderExpandedIndicator/igxHeaderCollapsedIndicator). Updating sample with custom icons.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts

@@ -21,7 +21,7 @@ export class IgxGroupByRowTemplateDirective {
  * @hidden
  */
 @Directive({
-    selector: '[igxRowExpandIndicator]'
+    selector: '[igxRowExpandedIndicator]'
 })
 export class IgxRowExpandIndicatorDirective {
 }
@@ -30,7 +30,7 @@ export class IgxRowExpandIndicatorDirective {
  * @hidden
  */
 @Directive({
-    selector: '[igxRowCollapseIndicator]'
+    selector: '[igxRowCollapsedIndicator]'
 })
 export class IgxRowCollapseIndicatorDirective {
 }
@@ -40,7 +40,7 @@ export class IgxRowCollapseIndicatorDirective {
  * @hidden
  */
 @Directive({
-    selector: '[igxHeaderExpandIndicator]'
+    selector: '[igxHeaderExpandedIndicator]'
 })
 export class IgxHeaderExpandIndicatorDirective {
 }
@@ -49,7 +49,7 @@ export class IgxHeaderExpandIndicatorDirective {
  * @hidden
  */
 @Directive({
-    selector: '[igxHeaderCollapseIndicator]'
+    selector: '[igxHeaderCollapsedIndicator]'
 })
 export class IgxHeaderCollapseIndicatorDirective {
 }

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

@@ -2699,17 +2699,17 @@ export class GroupableGridComponent extends DataParent {
             <ng-template igxGroupByRow let-groupRow>
                 <span>Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }}</span>
             </ng-template>
-            <ng-template igxRowExpandIndicator let-groupRow>
+            <ng-template igxRowExpandedIndicator let-groupRow>
                 <span>EXPANDED</span>
             </ng-template>
-            <ng-template igxRowCollapseIndicator let-groupRow>
+            <ng-template igxRowCollapsedIndicator let-groupRow>
                 <span>COLLAPSED</span>
             </ng-template>
 
-            <ng-template igxHeaderExpandIndicator>
+            <ng-template igxHeaderExpandedIndicator>
                 <span>EXPANDED</span>
             </ng-template>
-            <ng-template igxHeaderCollapseIndicator>
+            <ng-template igxHeaderCollapsedIndicator>
                 <span>COLLAPSED</span>
             </ng-template>
         </igx-grid>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts

@@ -1370,16 +1370,16 @@ public toggleChildRI = true;
             <igx-row-island [key]="'childData'" [autoGenerate]="true" #rowIsland2 >
             </igx-row-island>
         </igx-row-island>
-        <ng-template igxRowExpandIndicator>
+        <ng-template igxRowExpandedIndicator>
                 <span>EXPANDED</span>
         </ng-template>
-        <ng-template igxRowCollapseIndicator>
+        <ng-template igxRowCollapsedIndicator>
                 <span>COLLAPSED</span>
         </ng-template>
-        <ng-template igxHeaderCollapseIndicator>
+        <ng-template igxHeaderCollapsedIndicator>
             <span>COLLAPSED</span>
         </ng-template>
-        <ng-template igxHeaderExpandIndicator>
+        <ng-template igxHeaderExpandedIndicator>
             <span>EXPANDED</span>
         </ng-template>
     </igx-hierarchical-grid>`

projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts

@@ -737,10 +737,10 @@ export class IgxTreeGridDefaultLoadingComponent implements OnInit {
         <igx-column [field]="'Name'" dataType="string" [sortable]="true"></igx-column>
         <igx-column [field]="'HireDate'" dataType="date" [sortable]="true"></igx-column>
         <igx-column [field]="'Age'" dataType="number" [sortable]="true"></igx-column>
-        <ng-template igxRowExpandIndicator>
+        <ng-template igxRowExpandedIndicator>
         <span>EXPANDED</span>
         </ng-template>
-        <ng-template igxRowCollapseIndicator>
+        <ng-template igxRowCollapsedIndicator>
             <span>COLLAPSED</span>
         </ng-template>
     </igx-tree-grid>

src/app/hierarchical-grid/hierarchical-grid.sample.html

@@ -10,8 +10,17 @@ <h4 class="sample-title">Sample One</h4>
             <igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
             <igx-column field="ProductName" hasSummary='true'></igx-column>
         </igx-column-group>
-        <ng-template igxHeaderCollapseIndicator let-hgrid>
-            <igx-icon role="button" fontSet="material" (click)="hgrid.expandAll()">unfold_more</igx-icon>
+        <ng-template igxHeaderCollapsedIndicator let-hgrid>
+            <igx-icon role="button" fontSet="material" (click)="hgrid.expandAll()">add</igx-icon>
+        </ng-template>
+        <ng-template igxHeaderExpandedIndicator let-hgrid>
+            <igx-icon role="button" fontSet="material" (click)="hgrid.collapseAll()">remove</igx-icon>
+        </ng-template>
+        <ng-template igxRowExpandedIndicator let-row>
+            <igx-icon role="button" fontSet="material">remove</igx-icon>
+        </ng-template>
+        <ng-template igxRowCollapsedIndicator let-row>
+            <igx-icon role="button" fontSet="material">add</igx-icon>
         </ng-template>
         <igx-row-island [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
                 <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>