igxGrid - refactor header and filter cell components 6.2.x (#3017)

* feat(filtering): header group component POC #542

# Conflicts:
#	projects/igniteui-angular/src/lib/grids/column.component.ts
#	projects/igniteui-angular/src/lib/grids/grid-header.component.ts
#	projects/igniteui-angular/src/lib/grids/grid/grid.component.html
#	projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
#	projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

* feat(filtering): header group component POC #542

# Conflicts:
#	projects/igniteui-angular/src/lib/grids/column.component.ts
#	projects/igniteui-angular/src/lib/grids/grid-base.component.ts
#	projects/igniteui-angular/src/lib/grids/grid-header-group.component.html
#	projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts
#	projects/igniteui-angular/src/lib/grids/grid/grid.component.html
#	projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
#	projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

* feat(filtering): some MCH related improvements #542

* feat(filtering): fix some minor issues #542

* test(*): start fixing failing tests for MCH #542

* feat(filtering): fix build error #542

* chore(filtering): Small refactoring (#2938)

* test(*): refactor failing tests #542

* feat(filtering): CD strategy for header group component #542

* feat(filtering): rework column moving dragGhost creation #542

* feat(filtering): minor fixes and improvements #542

* chore(filtering): Change filtering components strategy to OnPush (#2938)

* test(filtering): Fix failing tests (#2938)

* test(filtering): Fix filtering UI tests (#2938)

* test(filtering): filtering UI tests refactoring #542

* test(filtering): fix timer issues in filtering UI test #542

* fix(*): sorting icon not being updated when sort/groupBy via API #542

* feat(filtering): fix introduced resizer bug #542

* chore(*): review comments changes #542

* feat(filtering): fix broken behaviors #542

* chore(*): some clean up, etc. #542

* feat(filtering): some API refinements #542

* fix(filtering): Fix async issue in test (#2995)

* fix(filtering): Fix empty bool expected result (#2938)

projects/igniteui-angular/src/lib/core/utils.ts

@@ -163,10 +163,10 @@ export const enum KEYS {
 * let range = document.createRange();
 * let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
 *
-* let size = valToPxlsUsingRange(range, column.cells[0].nativeElement);
+* let size = getNodeSizeViaRange(range, column.cells[0].nativeElement);
 * ```
  */
-export function valToPxlsUsingRange(range: Range, node: any): number {
+export function getNodeSizeViaRange(range: Range, node: any): number {
     let overflow = null;
     if (isIE() || isEdge()) {
         overflow = node.style.overflow;
@@ -194,7 +194,7 @@ export function valToPxlsUsingRange(range: Range, node: any): number {
 * let size = valToPxlsUsingCanvas(ctx, column.cells[0].nativeElement);
 * ```
  */
-export function valToPxlsUsingCanvas(canvas2dCtx: any, node: any): number {
+export function getNodeSizeViaCanvas(canvas2dCtx: any, node: any): number {
     const s = this.grid.document.defaultView.getComputedStyle(node);
 
     // need to set the font to get correct width
@@ -230,6 +230,22 @@ export function isNavigationKey(key: string): boolean {
         'home', 'end', 'space', 'spacebar', ' '].indexOf(key) !== -1;
 }
 
+/**
+ *@hidden
+ */
+export function flatten(arr: any[]) {
+    let result = [];
+
+    arr.forEach(el => {
+        result.push(el);
+        if (el.children) {
+            const children = Array.isArray(el.children) ? el.children : el.children.toArray();
+            result = result.concat(flatten(children));
+        }
+    });
+    return result;
+}
+
 export interface CancelableEventArgs {
     /**
      * Provides the ability to cancel the event.

projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.ts

@@ -572,11 +572,14 @@ export class IgxDragDirective implements OnInit, OnDestroy {
 
     /**
      * @hidden
-     * Create dragGhost element - copy of the base element. Bind all needed events.
+     * Create dragGhost element - if a Node object is provided it creates a clone of that node,
+     * otherwise it clones the host element.
+     * Bind all needed events.
      * @param event Pointer event required when the dragGhost is being initialized.
+     * @param node The Node object to be cloned.
      */
-    protected createDragGhost(event) {
-        this._dragGhost = this.element.nativeElement.cloneNode(true);
+    protected createDragGhost(event, node: any = null) {
+        this._dragGhost = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true);
         this._dragGhost.style.transitionDuration = '0.0s';
         this._dragGhost.style.position = 'absolute';
         this._dragGhost.style.top = this._dragStartY + 'px';

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -15,7 +15,7 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
 import { GridBaseAPIService } from './api.service';
 import { IgxColumnComponent } from './column.component';
-import { isNavigationKey, valToPxlsUsingRange, KEYS } from '../core/utils';
+import { isNavigationKey, getNodeSizeViaRange, KEYS } from '../core/utils';
 import { State } from '../services/index';
 import { IgxGridBaseComponent, IGridEditEventArgs } from './grid-base.component';
 import { first } from 'rxjs/operators';
@@ -380,6 +380,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
      * @memberof IgxGridCellComponent
      */
     @HostBinding('style.min-width')
+    @HostBinding('style.max-width')
     @HostBinding('style.flex-basis')
     get width() {
         const hasVerticalScroll = !this.grid.verticalScrollContainer.dc.instance.notVirtual;
@@ -902,7 +903,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
      */
     public calculateSizeToFit(range: any): number {
         return Math.max(...Array.from(this.nativeElement.children)
-                   .map((child) => valToPxlsUsingRange(range, child)));
+                   .map((child) => getNodeSizeViaRange(range, child)));
     }
 
     private isToggleKey(key) {

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

@@ -21,15 +21,17 @@ import {
     IgxCellHeaderTemplateDirective,
     IgxCellTemplateDirective
 } from './grid.common';
-import {
-    IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand,
-    IgxStringFilteringOperand,
-    IgxGridBaseComponent,
-    FilteringExpressionsTree
-} from '../../public_api';
 import { IgxGridHeaderComponent } from './grid-header.component';
-import { valToPxlsUsingRange } from '../core/utils';
 import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
+import { getNodeSizeViaRange, flatten } from '../core/utils';
+import {
+    IgxBooleanFilteringOperand,
+    IgxNumberFilteringOperand,
+    IgxDateFilteringOperand,
+    IgxStringFilteringOperand } from '../data-operations/filtering-condition';
+import { IgxGridBaseComponent } from './grid-base.component';
+import { FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
+import { IgxGridFilteringCellComponent } from './filtering/grid-filtering-cell.component';
 
 /**
  * **Ignite UI for Angular Column** -
@@ -304,6 +306,11 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     @Input()
     public headerClasses = '';
+        /**
+     *@hidden
+     */
+    @Input()
+    public headerGroupClasses = '';
     /**
      * Sets a conditional class selector of the column cells.
      * Accepts an object literal, containing key-value pairs,
@@ -1064,9 +1071,19 @@ export class IgxColumnComponent implements AfterContentInit {
      * @memberof IgxColumnComponent
      */
     get headerCell(): IgxGridHeaderComponent {
-        if (this.grid.headerList.length > 0) {
-            return flatten(this.grid.headerList.toArray()).find((h) => h.column === this);
-        }
+        return this.grid.headerCellList.find((header) => header.column === this);
+    }
+
+    /**
+     * Returns a reference to the filter cell of the column.
+     * ```typescript
+     * let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
+     * let filterell = column.filterell;
+     * ```
+     * @memberof IgxColumnComponent
+     */
+    get filterCell(): IgxGridFilteringCellComponent {
+        return this.grid.filterCellList.find((filterCell) => filterCell.column === this);
     }
 
     /**
@@ -1109,7 +1126,7 @@ export class IgxColumnComponent implements AfterContentInit {
             if (this.cells[0].nativeElement.children.length > 0) {
                 this.cells.forEach((cell) => cellsContentWidths.push(cell.calculateSizeToFit(range)));
             } else {
-                cellsContentWidths = this.cells.map((cell) => valToPxlsUsingRange(range, cell.nativeElement));
+                cellsContentWidths = this.cells.map((cell) => getNodeSizeViaRange(range, cell.nativeElement));
             }
 
             const index = cellsContentWidths.indexOf(Math.max(...cellsContentWidths));
@@ -1122,16 +1139,15 @@ export class IgxColumnComponent implements AfterContentInit {
 
         if (this.headerCell) {
             let headerCell;
-            const titleIndex = this.grid.hasMovableColumns ? 1 : 0;
-            if (this.headerTemplate && this.headerCell.elementRef.nativeElement.children[titleIndex].children.length > 0) {
-                headerCell =  Math.max(...Array.from(this.headerCell.elementRef.nativeElement.children[titleIndex].children)
-                    .map((child) => valToPxlsUsingRange(range, child)));
+            if (this.headerTemplate && this.headerCell.elementRef.nativeElement.children[0].children.length > 0) {
+                headerCell =  Math.max(...Array.from(this.headerCell.elementRef.nativeElement.children[0].children)
+                    .map((child) => getNodeSizeViaRange(range, child)));
             } else {
-                headerCell = valToPxlsUsingRange(range, this.headerCell.elementRef.nativeElement.children[titleIndex]);
+                headerCell = getNodeSizeViaRange(range, this.headerCell.elementRef.nativeElement.children[0]);
             }
 
-            if (this.sortable || (this.grid.allowFiltering && this.filterable)) {
-                headerCell += this.headerCell.elementRef.nativeElement.children[titleIndex + 1].getBoundingClientRect().width;
+            if (this.sortable) {
+                headerCell += this.headerCell.elementRef.nativeElement.children[1].getBoundingClientRect().width;
             }
 
             const headerStyle = this.grid.document.defaultView.getComputedStyle(this.headerCell.elementRef.nativeElement);
@@ -1350,25 +1366,10 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             if (typeof val.width === 'string' && val.width.indexOf('%') !== -1) {
                 isChildrenWidthInPercent = true;
             }
-
             return acc + parseInt(val.width, 10);
         }, 0)}`;
         return isChildrenWidthInPercent ? width + '%' : width;
     }
 
     set width(val) { }
 }
-
-
-
-function flatten(arr: any[]) {
-    let result = [];
-
-    arr.forEach(el => {
-        result.push(el);
-        if (el.children) {
-            result = result.concat(flatten(el.children.toArray()));
-        }
-    });
-    return result;
-}

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.html

@@ -9,8 +9,9 @@
 
 <ng-template #defaultFilter>
     <igx-chips-area #chipsArea class="igx-filtering-chips">
-        <ng-container *ngFor="let item of visibleExpressionsList; let last = last;" >
+        <ng-container *ngFor="let item of expressionsList; let last = last; let index = index;" >
             <igx-chip
+                *ngIf="isChipVisible(index)"
                 [removable]="true"
                 [displayDensity]="'cosy'"
                 (click)="onChipClicked(item.expression)"
@@ -24,7 +25,7 @@
                     {{filteringService.getChipLabel(item.expression)}}
                 </span>
             </igx-chip>
-            <span class="igx-filtering-chips__connector" *ngIf="!last">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
+            <span class="igx-filtering-chips__connector" *ngIf="!last && isChipVisible(index + 1)">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
         </ng-container>
         <div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()" (keydown)="onChipKeyDown($event)" tabindex="0">
             <igx-icon>filter_list</igx-icon>