feat(IgxColumnGroup): add properties that allow expand/collapse colGroup #3343

Author: ddincheva

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

@@ -23,15 +23,22 @@ import { flatten } from '../../core/utils';
     template: ``
 })
 export class IgxColumnGroupComponent extends IgxColumnComponent implements AfterContentInit {
-    private _collapsible = false;
-    private _expanded = true;
 
     @ContentChildren(IgxColumnComponent, { read: IgxColumnComponent })
     children = new QueryList<IgxColumnComponent>();
 
+    /**
+     * Set if the column group is collapsible.
+     * Default value is `false`
+     * ```html
+     *  <igx-column-group [collapsible] = "true"></igx-column-group>
+     * ```
+     * @memberof IgxColumnGroupComponent
+     */
     @Input()
     public set collapsible(value: boolean) {
         this._collapsible = value;
+        this.collapsibleChange.emit(this._collapsible);
         if (this.children) {
             if (value) {
                 this.setExpandCollapseState();
@@ -44,17 +51,28 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         return this._collapsible;
     }
 
+    /**
+     * Set whether the group is expanded or collapsed initially.
+     * Applied only if the collapsible property is set to `true`
+     * Default value is `true`
+     * ```html
+     *  const state = false
+     *  <igx-column-group [(expand)] = "state"></igx-column-group>
+     * ```
+     * @memberof IgxColumnGroupComponent
+     */
     @Input()
-    public get expanded() {
-        return this._expanded;
-    }
-    public set expanded(value: boolean) {
-        this._expanded = value;
+    public set expand(value: boolean) {
         if (!this.collapsible) { return; }
+        this._expand = value;
+        this.expandChange.emit(this._expand);
         if (!this.hidden && this.children) {
             this.setExpandCollapseState();
         }
     }
+    public get expand() {
+        return this._expand;
+    }
 
     /**
      * Gets the column group `summaries`.
@@ -123,6 +141,18 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
      */
     set bodyTemplate(template: TemplateRef<any>) { }
 
+    /**
+     * Allows you to define a custom template for expand/collapse indicator
+     * @memberof IgxColumnGroupComponent
+     */
+    @Input()
+    get collapsibleIndicatorTemplate(): TemplateRef<any> {
+        return this._collapseIndicatorTemplate;
+    }
+    set collapsibleIndicatorTemplate(template: TemplateRef<any>) {
+        this._collapseIndicatorTemplate = template;
+    }
+
     /**
      * Returns a reference to the inline editor template.
      * ```typescript
@@ -177,8 +207,8 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             this.children.forEach(child => child.hidden = value);
         } else {
             this.children.forEach(c =>  {
-                if (c.openOnGroupCollapsed === undefined) {c.hidden = false; return; }
-                c.hidden = this.expanded ? c.openOnGroupCollapsed : !c.openOnGroupCollapsed;
+                if (c.visibleOnCollapse === undefined) {c.hidden = false; return; }
+                c.hidden = this.expand ? c.visibleOnCollapse : !c.visibleOnCollapse;
             });
         }
     }
@@ -200,6 +230,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         if (this.headTemplate && this.headTemplate.length) {
             this._headerTemplate = this.headTemplate.toArray()[0].template;
         }
+        if (this.collapseIndicatorTemplate) {
+            this._collapseIndicatorTemplate = this.collapseIndicatorTemplate.template;
+        }
         // currently only ivy fixes the issue, we have to slice only if the first child is group
         if (this.children.first === this) {
             this.children.reset(this.children.toArray().slice(1));
@@ -208,7 +241,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             child.parent = this;
         });
         if (this.collapsible) {
-            const cols = this.children.map(child => child.openOnGroupCollapsed);
+            const cols = this.children.map(child => child.visibleOnCollapse);
             if (!(cols.some(c => c === true) && cols.some(c => c === false))) {
                 this.collapsible = false;
                 return;
@@ -271,8 +304,8 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
     set width(val) { }
 
     private setExpandCollapseState() {
-        this.children.filter(col => (col.openOnGroupCollapsed !== undefined)).forEach(c =>  {
-            c.hidden = this._expanded ? c.openOnGroupCollapsed : !c.openOnGroupCollapsed;
+        this.children.filter(col => (col.visibleOnCollapse !== undefined)).forEach(c =>  {
+            c.hidden = this._expand ? c.visibleOnCollapse : !c.visibleOnCollapse;
         });
     }
 

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

@@ -38,6 +38,7 @@ import {
     IgxCellTemplateDirective,
     IgxCellHeaderTemplateDirective,
     IgxCellEditorTemplateDirective,
+    IgxCollapsibleIndicatorTemplateDirective,
     IgxFilterCellTemplateDirective
 } from './templates.directive';
 import { MRLResizeColumnInfo, MRLColumnSizeInfo } from './interfaces';
@@ -249,6 +250,15 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     @Output()
     public hiddenChange = new EventEmitter<boolean>();
+
+    /** @hidden */
+    @Output()
+    public expandChange = new EventEmitter<boolean>();
+
+    /** @hidden */
+    @Output()
+    public collapsibleChange = new EventEmitter<boolean>();
+
     /**
      * Gets whether the hiding is disabled.
      * ```typescript
@@ -827,6 +837,10 @@ export class IgxColumnComponent implements AfterContentInit {
     set filterCellTemplate(template: TemplateRef<any>) {
         this._filterCellTemplate = template;
     }
+
+    /** @hidden */
+    @Input('collapsibleIndicatorTemplate')
+    public collapsibleIndicatorTemplate: TemplateRef<any>;
     /**
      * Gets the cells of the column.
      * ```typescript
@@ -995,14 +1009,23 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     @Input() colStart: number;
 
+    /**
+     * Indicates whether the column will be visible when its parent is collapsed.
+     * ```html
+     * <igx-column-group>
+     *   <igx-column [visibleOnCollapse]="true"></igx-column>
+     * </igx-column-group>
+     * ```
+     * @memberof IgxColumnComponent
+     */
     @Input()
-    set openOnGroupCollapsed(value: boolean) {
-        this._openOnGroupCollapsed = value;
+    set visibleOnCollapse(value: boolean) {
+        this._visibleOnCollapse = value;
     }
 
-    get openOnGroupCollapsed(): boolean {
+    get visibleOnCollapse(): boolean {
         if (!this.parent) { return false; }
-        return this._openOnGroupCollapsed;
+        return this._visibleOnCollapse;
     }
 
     /**
@@ -1015,7 +1038,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * @hidden
      * @internal
      */
-    public expanded = true;
+    public expand = true;
 
     /**
      * hidden
@@ -1084,6 +1107,10 @@ export class IgxColumnComponent implements AfterContentInit {
      *@hidden
      */
     protected _filterCellTemplate: TemplateRef<any>;
+    /**
+     *@hidden
+     */
+    protected _collapseIndicatorTemplate: TemplateRef<any>;
     /**
      *@hidden
      */
@@ -1128,11 +1155,18 @@ export class IgxColumnComponent implements AfterContentInit {
      * @hidden
      */
     protected _editable: boolean;
+    /**
+     *  @hidden
+    */
+    protected _visibleOnCollapse;
     /**
      * @hidden
      */
-    protected _openOnGroupCollapsed;
-
+    protected _collapsible = false;
+    /**
+     * @hidden
+     */
+    protected _expand = true;
     /**
      * @hidden
      */
@@ -1161,6 +1195,11 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     @ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective, static: false })
     public filterCellTemplateDirective: IgxFilterCellTemplateDirective;
+    /**
+     *@hidden
+     */
+    @ContentChild(IgxCollapsibleIndicatorTemplateDirective, { read: IgxCollapsibleIndicatorTemplateDirective, static: false })
+    protected collapseIndicatorTemplate:  IgxCollapsibleIndicatorTemplateDirective;
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef) { }