Merge branch 'master' into sivanova/fix-toast-margin

Author: simeonoff

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/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.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/grid/grid.sorting.spec.ts

@@ -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.html

@@ -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-group.component.ts

@@ -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.html

@@ -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/headers/grid-header.component.ts

@@ -2,6 +2,7 @@ import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { UIInteractions } from './ui-interactions.spec';
+import { IgxChipComponent } from '../chips/chip.component';
 
 const CHIP_REMOVE_BUTTON = '.igx-chip__remove';
 const DROP_DOWN_SELECTED_ITEM_CLASS = '.igx-drop-down__item--selected';

projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts

@@ -1846,6 +1846,7 @@ export class GridFunctions {
         }
     }
 
+
     public static getHeaderSortIcon(header: DebugElement): DebugElement {
         return  header.query(By.css(SORT_ICON_CLASS));
     }