chore(IgxColumnGroups): address the requested changes

Author: ddincheva

CHANGELOG.md

@@ -25,8 +25,8 @@ All notable changes for each version of this project will be documented in this
     - `sortingExpressionsChange` event emitter is added, which is fired whenever a change to the sorting expressions has occurred (prior to performing the actual sorting).
     - `filteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the filtering expressions has occurred (prior to performing the actual filtering).
     - `advancedFilteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the advanced filtering expressions has occurred (prior to performing the actual filtering).
-    - `collapsible` and `expand` properties are added to the IgxColumnGroupComponent; `collapsible` property identifies that certain column group is collapsible; `expand` identifies whether the group is expanded or collapsed initially;
-    - `collapsibleChange` and `expandChange` events are added to the IgxColumnGroupComponent which are emited whenever `collapsible` and `expand` properties are changed accordingly;
+    - `collapsible` and `expanded` properties are added to the IgxColumnGroupComponent; `collapsible` property identifies that certain column group is collapsible; `expanded` identifies whether the group is expanded or collapsed initially;
+    - `collapsibleChange` and `expandedChange` events are added to the IgxColumnGroupComponent which are emited whenever `collapsible` and `expanded` properties are changed accordingly;
     - `visibleWhenCollapse` property has been added to the IgxColumnComponent; Allows you to set whether the column stay visible when its parrent is collapsed.
     - `visibleWhenCollapseChange` events is added to the IgxColumnComponent which are emited whenever `visibleWhenCollapse`  property is changed;
     - `collapsibleIndicatorTemplate` property is introduced to IgxColumnGroupComponent, which allows you to set a custom template for the expand collapse indicator;

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -62,16 +62,16 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
      * @memberof IgxColumnGroupComponent
      */
     @Input()
-    public set expand(value: boolean) {
+    public set expanded(value: boolean) {
         if (!this.collapsible) { return; }
-        this._expand = value;
-        this.expandChange.emit(this._expand);
+        this._expanded = value;
+        this.expandedChange.emit(this._expanded);
         if (!this.hidden && this.children) {
             this.setExpandCollapseState();
         }
     }
-    public get expand() {
-        return this._expand;
+    public get expanded() {
+        return this._expanded;
     }
 
     /**
@@ -208,7 +208,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         } else {
             this.children.forEach(c =>  {
                 if (c.visibleWhenCollapse === undefined) {c.hidden = false; return; }
-                c.hidden = this.expand ? c.visibleWhenCollapse : !c.visibleWhenCollapse;
+                c.hidden = this.expanded ? c.visibleWhenCollapse : !c.visibleWhenCollapse;
             });
         }
     }

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -253,7 +253,7 @@ export class IgxColumnComponent implements AfterContentInit {
 
     /** @hidden */
     @Output()
-    public expandChange = new EventEmitter<boolean>();
+    public expandedChange = new EventEmitter<boolean>();
 
     /** @hidden */
     @Output()
@@ -1050,7 +1050,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * @hidden
      * @internal
      */
-    public expand = true;
+    public expanded = true;
 
     /**
      * hidden
@@ -1178,7 +1178,7 @@ export class IgxColumnComponent implements AfterContentInit {
     /**
      * @hidden
      */
-    protected _expand = true;
+    protected _expanded = true;
     /**
      * @hidden
      */
@@ -1769,7 +1769,7 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     protected setExpandCollapseState() {
         this.children.filter(col => (col.visibleWhenCollapse !== undefined)).forEach(c =>  {
-            c.hidden = this._expand ? c.visibleWhenCollapse : !c.visibleWhenCollapse;
+            c.hidden = this._expanded ? c.visibleWhenCollapse : !c.visibleWhenCollapse;
         });
     }
 

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

@@ -26,23 +26,23 @@
 
 <ng-template #defaultCollapseIndicator>
     <igx-icon [attr.draggable]="false" >
-            {{column.expand ? 'expand_more' : 'chevron_right'}} </igx-icon>
+            {{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
 </ng-template>
 
 <ng-container *ngIf="!grid.hasColumnLayouts && column.columnGroup">
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left"></span>
     <div class="igx-grid__thead-title"
         role="columnheader"
         [attr.aria-label]="column.header || column.field"
-        [attr.aria-expanded]="column.expand"
+        [attr.aria-expanded]="column.expanded"
         tabindex="0"
         [ngClass]="{'igx-grid__th--pinned-last': hasLastPinnedChildColumn, 'igx-grid__th--collapsible': column.collapsible}"
         [igxColumnMovingDrag]="column"
         [ghostHost]="grid.outletDirective.nativeElement"
         [attr.droppable]="true"
         [igxColumnMovingDrop]="column">
         <ng-container *ngIf="column.collapsible">
-            <div (click)="column.expand = !column.expand">
+            <div (click)="column.expanded = !column.expanded">
                 <ng-container
                     *ngTemplateOutlet="column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}">
                 </ng-container>

src/app/grid-column-groups/grid-column-groups.sample.html

@@ -2,23 +2,23 @@
     <app-page-header title="Grid Column Groups"></app-page-header>
     <section style="height: 800px" class="sample-content">
             <ng-template igxCollapsibleIndicator let-column="column" #ind >
-                <igx-icon [attr.draggable]="false">{{column.expand ? 'remove' : 'add'}} </igx-icon>
+                <igx-icon [attr.draggable]="false">{{column.expanded ? 'remove' : 'add'}} </igx-icon>
             </ng-template>
         <igx-grid [allowFiltering]="true" [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [showToolbar]="true" [allowAdvancedFiltering]="true" [columnHiding]="true">
             <igx-column [movable]="true"  [resizable]="true" [pinned]="true" field="Missing"></igx-column>
-            <igx-column-group [movable]="true" header="General Information" [collapsible]="true" [expand]="true" [hidden]="true">
+            <igx-column-group [movable]="true" header="General Information" [collapsible]="true" [expanded]="true" [hidden]="true">
                 <igx-column [movable]="true" [filterable]="false" [hidden]="true" sortable="true" resizable="true" field="CompanyName" width="200px" [visibleWhenCollapse]="false"></igx-column>
                 <igx-column  field="Missing"></igx-column>
-                <igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expand]="false" [visibleWhenCollapse]="true">
+                <igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expanded]="false" [visibleWhenCollapse]="true">
                     <igx-column [movable]="true" [visibleWhenCollapse]="false" [hidden]="true" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
                     <igx-column [movable]="true" [visibleWhenCollapse]="false" [pinned]="true"  filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
                 </igx-column-group>
                 <ng-template igxCollapsibleIndicator let-column="column" #ind >
-                    <igx-icon [attr.draggable]="false">{{column.expand ? 'remove' : 'add'}} </igx-icon>
+                    <igx-icon [attr.draggable]="false">{{column.expanded ? 'remove' : 'add'}} </igx-icon>
                 </ng-template>
             </igx-column-group>
             <igx-column [movable]="true" [hidden]="s" [resizable]="true" field="ID" editable="true"></igx-column>
-            <igx-column-group [movable]="true" header="Address Information" [(collapsible)]='s' [expand]='true'>
+            <igx-column-group [movable]="true" header="Address Information" [(collapsible)]='s' [expanded]='true'>
                 <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country" [visibleWhenCollapse]= 'false'></igx-column>
                 <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region" [visibleWhenCollapse]= 'false'></igx-column>
                 <igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City" [visibleWhenCollapse]= 'false'></igx-column>

src/app/grid-column-groups/grid-column-groups.sample.ts

@@ -68,8 +68,8 @@ export class GridColumnGroupsSampleComponent implements AfterViewInit {
         col.hidden = !col.hidden;
         this.grid.getColumnByName('CompanyName').hidden = true;
         console.log(this.grid.getColumnByName('CompanyName').parent); */
-        (this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).expand =
-        !(this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).expand;
+        (this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).expanded =
+        !(this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).expanded;
 
     }