Merge branch 'master' into ibarakov/fix-6965-9.1.x

Author: kdinev

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

@@ -508,6 +508,11 @@
         @extend %igx-grid__filtering-cell !optional;
     }
 
+    @include e(filtering-cell, $m: 'selected') {
+        @extend %igx-grid__filtering-cell !optional;
+        @extend %igx-grid__filtering-cell--selected !optional;
+    }
+
     @include e(filtering-cell-indicator) {
         @extend %igx-grid__filtering-cell-indicator !optional;
     }

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

@@ -1074,7 +1074,7 @@
         border-bottom: none;
     }
 
-    %igx-grid__tr--pinned {       
+    %igx-grid__tr--pinned {
         position: relative;
         background: inherit;
         z-index: 10000;
@@ -2207,6 +2207,11 @@
         }
     }
 
+    %igx-grid__filtering-cell--selected {
+        color: --var($theme, 'row-selected-text-color');
+        background: --var($theme, 'row-selected-cell-background');
+    }
+
     %igx-grid__filtering-cell-indicator {
         position: relative;
         display: flex;

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss

@@ -46,7 +46,10 @@ $_fluent-tooltip: extend(
     $_fluent-shape-tooltip,
     (
         background: (
-            igx-color: 'surface'
+            igx-color: ('grays', 900)
+        ),
+        text-color: (
+            igx-contrast-color: ('grays', 900)
         )
     )
 );

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

@@ -10,6 +10,7 @@ import {
     TemplateRef,
     Output,
     EventEmitter,
+    ElementRef,
 } from '@angular/core';
 import { notifyChanges } from '../watch-changes';
 import { WatchColumnChanges } from '../watch-changes';
@@ -1319,7 +1320,7 @@ export class IgxColumnComponent implements AfterContentInit {
     protected collapseIndicatorTemplate:  IgxCollapsibleIndicatorTemplateDirective;
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef,
-        public rowIslandAPI: IgxRowIslandAPIService) { }
+        public rowIslandAPI: IgxRowIslandAPIService, public elementRef: ElementRef) { }
 
     /**
      * @hidden

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

@@ -59,8 +59,15 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
     @ViewChild('complexChip', { read: IgxChipComponent })
     protected complexChip: IgxChipComponent;
 
-    @HostBinding('class.igx-grid__filtering-cell')
-    public cssClass = 'igx-grid__filtering-cell';
+
+    @HostBinding('class')
+    get styleClasses(): string {
+        if (this.column && this.column.selected) {
+            return 'igx-grid__filtering-cell--selected';
+        }
+
+        return 'igx-grid__filtering-cell';
+    }
 
     constructor(public cdr: ChangeDetectorRef, public filteringService: IgxFilteringService) {
         this.filteringService.subscribeToEvents();

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

@@ -104,14 +104,14 @@ <h4>{{ column.header || column.field }}</h4>
 
     <section class="igx-excel-filter__actions">
 
-        <div *ngIf="column.selectable && grid.displayDensity==='comfortable'">
-            <ng-container *ngTemplateOutlet="selectingTemplate"></ng-container>
-        </div>
-
         <div *ngIf="column.movable">
             <ng-container *ngTemplateOutlet="movingTemplate"></ng-container>
         </div>
 
+        <div *ngIf="column.selectable && grid.displayDensity==='comfortable'">
+            <ng-container *ngTemplateOutlet="selectingTemplate"></ng-container>
+        </div>
+
         <div *ngIf="!column.disablePinning && grid.displayDensity==='comfortable'">
             <ng-container *ngTemplateOutlet="pinningTemplate"></ng-container>
         </div>

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

@@ -1573,6 +1573,23 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         expect(grid.columnList.length).toEqual(10);
     });
+
+    it('should set title attribute on column group header spans', () => {
+        const fixture = TestBed.createComponent(ColumnGroupTestComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.grid;
+        const generalGroup = grid.columnList.find(c => c.header === 'General Information');
+        generalGroup.elementRef.nativeElement.title = 'General Information Title';
+        fixture.detectChanges();
+
+        const headers = fixture.debugElement.queryAll(By.css('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));
+        const generalHeader = headers.find(h => h.nativeElement.textContent === 'General Information');
+        const addressHeader = headers.find(h => h.nativeElement.textContent === 'Address Information');
+
+        expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
+        expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
+    });
 });
 
 @Component({

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

@@ -12,6 +12,8 @@ import { ɵɵsetComponentScope } from '@angular/core';
 
 const SELECTED_COLUMN_CLASS = 'igx-grid__th--selected';
 const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected';
+const SELECTED_FILTER_CELL_CLASS = 'igx-grid__filtering-cell--selected';
+
 function selectedData() {
     return [{ ProductID: 1, ProductName: 'Chai' },
     { ProductID: 2, ProductName: 'Aniseed Syrup' },
@@ -766,11 +768,15 @@ describe('IgxGrid - Column Selection #grid', () => {
 
         it('Filtering: Verify column selection when filter row is opened ', fakeAsync(() => {
             grid.allowFiltering = true;
+            fix.detectChanges();
+            const filterCell = GridFunctions.getFilterCell(fix , 'ProductID');
+            expect(filterCell.nativeElement.classList.contains(SELECTED_FILTER_CELL_CLASS)).toBeFalsy();
             const colInStock = grid.getColumnByName('InStock');
             colProductID.selected = true;
             fix.detectChanges();
 
-            GridFunctions.clickFilterCellChipUI(fix, 'ProductName'); // Name column contains nested object as a value
+            expect(filterCell.nativeElement.classList.contains(SELECTED_FILTER_CELL_CLASS)).toBeTruthy();
+            GridFunctions.clickFilterCellChipUI(fix, 'InStock'); // Name column contains nested object as a value
             tick(150);
             fix.detectChanges();
 

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

@@ -375,6 +375,29 @@ describe('IgxGrid - Column properties #grid', () => {
         const row = grid.getRowByIndex(0);
         row.cells.forEach(cell => expect(cell.nativeElement.getAttribute('style')).toMatch('background: black'));
     });
+
+    it('should set title attribute on column header spans', () => {
+        const fix = TestBed.createComponent(ColumnsFromIterableComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.instance;
+        const idColumn = grid.getColumnByName('ID');
+        const nameColumn = grid.getColumnByName('Name');
+
+        idColumn.header = 'ID Header';
+        idColumn.elementRef.nativeElement.title = 'ID Title';
+        nameColumn.header = 'Name Header';
+        fix.detectChanges();
+
+        const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+        const idHeader = headers[0].nativeElement;
+        const nameHeader = headers[1].nativeElement;
+        expect(idHeader.textContent).toBe('ID Header');
+        expect(idHeader.firstElementChild.firstElementChild.title).toBe('ID Title');
+        expect(nameHeader.textContent).toBe('Name Header');
+        expect(nameHeader.firstElementChild.firstElementChild.title).toBe('Name Header');
+    });
+
 });
 
 @Component({

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

@@ -25,7 +25,7 @@
 
 
 <ng-template #defaultColumn>
-    <span class="igx-grid__th-group-title" [attr.title]="column.header">{{column.header}}</span>
+    <span class="igx-grid__th-group-title" [attr.title]="columnTitle">{{column.header}}</span>
 </ng-template>
 
 <ng-template #defaultCollapseIndicator>

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

@@ -236,6 +236,13 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         return this.element.nativeElement.getBoundingClientRect().height;
     }
 
+    /**
+     * @hidden
+     */
+    get columnTitle() {
+        return this.column.elementRef.nativeElement.getAttribute('title') || this.column.header;
+    }
+
     /**
      * @hidden
      */

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

@@ -1,5 +1,5 @@
 <ng-template #defaultColumn>
-    <span [attr.title]="column.header || column.field">{{ column.header || column.field }}</span>
+    <span [attr.title]="columnTitle">{{ column.header || column.field }}</span>
 </ng-template>
 
 <span class="igx-grid__th-title">

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

@@ -130,6 +130,11 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
             && (!this.grid.filteringService.isFilterRowVisible || this.grid.filteringService.filteredColumn !== this.column);
     }
 
+    get columnTitle() {
+        return this.column.elementRef.nativeElement.getAttribute('title') ||
+            this.column.header || this.column.field;
+    }
+
     @HostBinding('attr.role')
     public hostRole = 'columnheader';
 

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

@@ -49,14 +49,15 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             rowIsland2 = fix.componentInstance.rowIsland2;
         }));
 
-        it('should allow only one cell to be selected in the whole hierarchical grid.',  () => {
+        it('should allow only one cell to be selected in the whole hierarchical grid.', fakeAsync(() => {
             hierarchicalGrid.height = '500px';
             hierarchicalGrid.reflow();
             fix.detectChanges();
 
             let firstRow = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
             firstRow.toggle();
             fix.detectChanges();
+            tick(100);
             expect(firstRow.expanded).toBeTruthy();
 
             let fCell = firstRow.cells.toArray()[0];
@@ -85,7 +86,8 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             fix.detectChanges();
             expect(fChildCell.selected).toBeFalsy();
             expect(fCell.selected).toBeTruthy();
-        });
+        }));
+
     });
 
     describe('Row Selection', () => {
@@ -97,10 +99,12 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             rowIsland2 = fix.componentInstance.rowIsland2;
         }));
 
-        it('should have checkboxes on each row', () => {
+        it('should have checkboxes on each row', fakeAsync(() => {
             hierarchicalGrid.expandChildren = true;
+            tick(100);
             fix.detectChanges();
             rowIsland1.expandChildren = true;
+            tick(100);
             fix.detectChanges();
 
             expect(hierarchicalGrid.rowSelection).toEqual(GridSelectionMode.multiple);
@@ -127,7 +131,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             for (const r of childGrid.dataRowList.toArray()) {
                 GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement, false, false);
             }
-        });
+        }));
 
         it('should able to change rowSelection at runtime', () => {
             hierarchicalGrid.expandChildren = true;
@@ -556,13 +560,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             GridSelectionFunctions.verifyRowsArraySelected(childGrid.dataRowList.toArray());
         });
 
-        it('should not be able to select deleted row', () => {
+        it('should not be able to select deleted row', fakeAsync(() => {
             // Expand first row
             const firstRow = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
             firstRow.toggle();
             fix.detectChanges();
 
             firstRow.onClick(UIInteractions.getMouseEvent('click'));
+            tick();
             fix.detectChanges();
 
             GridSelectionFunctions.verifyRowSelected(firstRow);
@@ -578,6 +583,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
 
             // Click on deleted row
             firstRow.onClick(UIInteractions.getMouseEvent('click'));
+            tick();
             fix.detectChanges();
 
             GridSelectionFunctions.verifyRowSelected(firstRow, false);
@@ -606,13 +612,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
 
             const childGridFirstRow = childGrid.getRowByIndex(0);
             childGridFirstRow.onClick(UIInteractions.getMouseEvent('click', false, false, true));
+            tick();
             fix.detectChanges();
 
             GridSelectionFunctions.verifyRowSelected(firstRow, false);
             GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
             expect(hierarchicalGrid.selectedRows()).toEqual(['1', '2', '3', '4']);
             expect(childGrid.selectedRows()).toEqual(['00']);
-        });
+        }));
 
         it('should be able to select added row', () => {
             // Set multiple selection to first row island

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

@@ -6,8 +6,8 @@
             </ng-template>
         <igx-grid [allowFiltering]="true" [pinning]="{columns: 1}" [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [showToolbar]="true" [allowAdvancedFiltering]="true" [columnHiding]="true" [columnPinning]='true'>
             <igx-column [movable]="true"  [resizable]="true" [pinned]="true" field="Missing"></igx-column>
-            <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" [visibleWhenCollapsed]="false"></igx-column>
+            <igx-column-group [movable]="true" header="General Information" title="General Company Information" [collapsible]="true" [expanded]="true" [hidden]="true">
+                <igx-column [movable]="true" [filterable]="false" [hidden]="true" sortable="true" resizable="true" field="CompanyName" title="Company Name" width="200px" [visibleWhenCollapsed]="false"></igx-column>
                 <igx-column  field="Missing"></igx-column>
                 <igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expanded]="false" [visibleWhenCollapsed]="true">
                     <igx-column [movable]="true" [visibleWhenCollapsed]="false" [hidden]="true" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>