Merge branch '8.1.x' into mkirova/fix-4416-master

Author: kdinev

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

@@ -68,6 +68,11 @@
             @extend %grid-excel-actions__action !optional;
         }
 
+        @include e(actions-pin, $m: disabled) {
+            @extend %grid-excel-actions__action !optional;
+            @extend %grid-excel-actions__action--disabled !optional;
+        }
+
         @include e(actions-unpin) {
             @extend %grid-excel-actions__action !optional;
         }

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

@@ -170,7 +170,7 @@ export const enum KEYS {
  */
 export function getNodeSizeViaRange(range: Range, node: any): number {
     let overflow = null;
-    if (isIE() || isEdge()) {
+    if (!isFirefox()) {
         overflow = node.style.overflow;
         // we need that hack - otherwise content won't be measured correctly in IE/Edge
         node.style.overflow = 'visible';
@@ -179,7 +179,7 @@ export function getNodeSizeViaRange(range: Range, node: any): number {
     range.selectNodeContents(node);
     const width = range.getBoundingClientRect().width;
 
-    if (isIE() || isEdge()) {
+    if (!isFirefox()) {
         // we need that hack - otherwise content won't be measured correctly in IE/Edge
         node.style.overflow = overflow;
     }

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

@@ -1391,9 +1391,7 @@ export class IgxColumnComponent implements AfterContentInit {
             return false;
         }
 
-        const width = parseInt(this.width, 10);
-
-        if (!this.parent && (grid.getUnpinnedWidth(true) - width < grid.unpinnedAreaMinWidth)) {
+        if (!this.parent && !this.pinnable) {
             return false;
         }
 
@@ -1684,6 +1682,15 @@ export class IgxColumnComponent implements AfterContentInit {
         this.calcPixelWidth = parseInt(this._calcWidth, 10);
     }
 
+    /**
+     *@hidden
+    */
+    public get pinnable() {
+        const gridUnpinnedWidth = (this.grid as any).getUnpinnedWidth(true);
+        const columnWidth = parseInt(this.width, 10);
+        return !((gridUnpinnedWidth - columnWidth) < this.grid.unpinnedAreaMinWidth);
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts

@@ -23,6 +23,9 @@ export class IgxExcelStyleColumnMovingComponent {
     @Input()
     public displayDensity: DisplayDensity;
 
+    @Input()
+    public isColumnPinnable: boolean;
+
     constructor() {}
 
     private get visibleColumns() {
@@ -32,6 +35,7 @@ export class IgxExcelStyleColumnMovingComponent {
     get canNotMoveLeft() {
         return this.column.visibleIndex === 0 ||
             (this.grid.unpinnedColumns.indexOf(this.column) === 0 && this.column.disablePinning) ||
+            (this.grid.unpinnedColumns.indexOf(this.column) === 0 && !this.isColumnPinnable) ||
             (this.column.level !== 0 && !this.findColumn(0, this.visibleColumns));
     }
 

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

@@ -14,6 +14,7 @@ <h4>{{ column.header || column.field }}</h4>
                 igxButton="icon"
                 [displayDensity]="grid.displayDensity"
                 (click)="onPin()"
+                [disabled]="!isColumnPinnable"
                 tabindex="0">
                 <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
             </button>
@@ -54,6 +55,7 @@ <h4>{{ column.header || column.field }}</h4>
                 class="igx-excel-filter__move"
                 [column]="column"
                 [grid]="grid"
+                [isColumnPinnable]="isColumnPinnable"
                 [displayDensity]="grid.displayDensity">
             </igx-excel-style-column-moving>
         </ng-template>
@@ -63,7 +65,7 @@ <h4>{{ column.header || column.field }}</h4>
         </div>
 
         <ng-template #defaultExcelStylePinningTemplate>
-            <div class="igx-excel-filter__actions-pin"
+            <div [ngClass]="pinClass()"
                 (click)="onPin()"
                 tabindex="0"
                 *ngIf="!column.pinned">

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

@@ -8,7 +8,8 @@ import {
     Directive,
     OnDestroy,
     AfterViewInit,
-    ElementRef
+    ElementRef,
+    OnInit
 } from '@angular/core';
 import {
     HorizontalAlignment,
@@ -87,7 +88,7 @@ export class IgxExcelStylePinningTemplateDirective {
     selector: 'igx-grid-excel-style-filtering',
     templateUrl: './grid.excel-style-filtering.component.html'
 })
-export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterViewInit {
+export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, AfterViewInit {
     private static readonly filterOptimizationThreshold = 2;
 
     private shouldOpenSubMenu = true;
@@ -148,6 +149,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
     @ViewChild('defaultExcelStylePinningTemplate', { read: TemplateRef, static: true })
     protected defaultExcelStylePinningTemplate: TemplateRef<any>;
 
+    public isColumnPinnable: boolean;
+
     get grid(): any {
         return this.filteringService.grid;
     }
@@ -171,6 +174,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
 
     constructor(private cdr: ChangeDetectorRef) {}
 
+    ngOnInit() {
+        this.isColumnPinnable = this.column.pinnable;
+    }
+
     ngOnDestroy(): void {
         this.destroy$.next(true);
         this.destroy$.complete();
@@ -205,6 +212,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
         return 'igx-excel-filter__actions-clear--disabled';
     }
 
+    public pinClass() {
+        return this.isColumnPinnable ? 'igx-excel-filter__actions-pin' : 'igx-excel-filter__actions-pin--disabled';
+    }
+
     public initialize(column: IgxColumnComponent, filteringService: IgxFilteringService, overlayService: IgxOverlayService,
         overlayComponentId: string) {
         this.column = column;

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

@@ -687,7 +687,8 @@ describe('IgxGrid - Deferred Column Resizing', () => {
 
         column.autosize();
         fixture.detectChanges();
-        expect(column.width).toEqual('119px');
+        // the exact width is different between chrome and chrome headless so an exact match is erroneous
+        expect(Math.abs(parseInt(column.width, 10) - 120)).toBeLessThan(2);
 
         // height/width setter rAF
         await wait(16);

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

@@ -5361,6 +5361,96 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
 
             expect(grid.filteredData).toBeNull();
         }));
+
+        it('Move-left button is disabled when using it to pin a column and max pin area width is reached.',
+        fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '500px';
+            fix.detectChanges();
+            grid.getColumnByName('ID').filterable = true;
+            grid.getColumnByName('ID').movable = true;
+            grid.cdr.detectChanges();
+            tick(100);
+
+            // Pin columns until maximum pin area width is reached.
+            const columns = ['ProductName', 'Downloads', 'Released'];
+            columns.forEach((columnField) => {
+                GridFunctions.clickExcelFilterIcon(fix, columnField);
+                fix.detectChanges();
+                GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+                tick(200);
+                fix.detectChanges();
+            });
+
+            // Verify pinned columns and 'ID' column position.
+            const column = grid.columns.find((col) => col.field === 'ID');
+            GridFunctions.verifyColumnIsPinned(column, false, 3);
+            expect(GridFunctions.getColumnHeaderByIndex(fix, 3).innerText).toBe('ID');
+
+            // Open ESF for the 'ID' column and verify that 'move left' button is disabled.
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            const moveComponent = GridFunctions.getExcelFilteringMoveComponent(fix);
+            const moveLeftButton = GridFunctions.sortNativeElementsHorizontally(
+                Array.from(moveComponent.querySelectorAll('.igx-button--flat')))[0];
+            expect(moveLeftButton.classList.contains('igx-button--disabled')).toBe(true);
+        }));
+
+        it('Pin button is disabled when using it to pin a column and max pin area width is reached.',
+        fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '500px';
+            fix.detectChanges();
+            grid.getColumnByName('ID').filterable = true;
+            grid.getColumnByName('ID').movable = true;
+            grid.cdr.detectChanges();
+            tick(100);
+
+            // Pin columns until maximum pin area width is reached.
+            const columns = ['ProductName', 'Downloads', 'Released'];
+            columns.forEach((columnField) => {
+                GridFunctions.clickExcelFilterIcon(fix, columnField);
+                fix.detectChanges();
+                GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+                tick(200);
+                fix.detectChanges();
+            });
+
+            // Verify pinned columns and 'ID' column position.
+            const column = grid.columns.find((col) => col.field === 'ID');
+            GridFunctions.verifyColumnIsPinned(column, false, 3);
+            expect(GridFunctions.getColumnHeaderByIndex(fix, 3).innerText).toBe('ID');
+
+            // Open ESF for the 'ID' column and verify that 'pin column' button is disabled.
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            let pinButton = GridFunctions.getExcelFilteringPinContainer(fix);
+            expect(pinButton.classList.contains('igx-excel-filter__actions-pin--disabled')).toBe(true,
+                'pinButton should be disabled');
+
+            // Close ESF.
+            GridFunctions.clickCancelExcelStyleFiltering(fix);
+            fix.detectChanges();
+
+            grid.displayDensity = DisplayDensity.compact;
+            tick(200);
+            fix.detectChanges();
+
+            // Pin one more column, because there is enough space for one more in 'compact' density.
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            fix.detectChanges();
+            GridFunctions.clickPinIconInExcelStyleFiltering(fix, true);
+            tick(200);
+            fix.detectChanges();
+
+            // Open ESF for the 'ID' column and verify that 'pin column' icon button is disabled.
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            const headerButtons = GridFunctions.getExcelFilteringHeaderIcons(fix);
+            pinButton = GridFunctions.sortNativeElementsHorizontally(Array.from(headerButtons))[0];
+            expect(pinButton.classList.contains('igx-button--disabled')).toBe(true,
+                'pinButton in header area should be disabled');
+        }));
     });
 
     describe(null, () => {

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts

@@ -166,9 +166,8 @@ describe('IgxGrid - multi-row-layout', () => {
         verifyLayoutHeadersAreAligned(headerCells, firstRowCells);
 
         // verify block style
-        let groupHeaderBlocks = fixture.debugElement.query(By.css('.igx-grid__thead')).queryAll(By.css(GRID_MRL_BLOCK));
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateColumns).toBe('200px 200px 200px');
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateRows).toBe('1fr 1fr 1fr');
+        expect(grid.columnList.first.getGridTemplate(false, false)).toBe('200px 200px 200px');
+        expect(grid.columnList.first.getGridTemplate(true, false)).toBe('repeat(3,1fr)');
 
         // creating an incomplete layout 2
         fixture.componentInstance.colGroups = [{
@@ -183,9 +182,8 @@ describe('IgxGrid - multi-row-layout', () => {
         fixture.componentInstance.grid.width = '617px';
         fixture.detectChanges();
 
-        groupHeaderBlocks = fixture.debugElement.query(By.css('.igx-grid__thead')).queryAll(By.css(GRID_MRL_BLOCK));
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateColumns).toBe('200px 200px 200px');
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateRows).toBe('1fr 1fr 1fr');
+        expect(grid.columnList.first.getGridTemplate(false, false)).toBe('200px 200px 200px');
+        expect(grid.columnList.first.getGridTemplate(true, false)).toBe('repeat(3,1fr)');
 
     });
     it('should initialize correctly when no column widths are set.', () => {
@@ -854,14 +852,16 @@ describe('IgxGrid - multi-row-layout', () => {
 
         // check first group has height of 2 row spans in header and rows but the header itself should span 1 row
         // check group block and column header height
-        const groupHeaderBlocks = fixture.debugElement.query(By.css('.igx-grid__thead')).queryAll(By.css(GRID_MRL_BLOCK));
+        const firstLayout = grid.columnList.toArray()[0];
         expect(grid.multiRowLayoutRowSize).toEqual(2);
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateRows).toEqual('1fr 1fr');
-        expect(groupHeaderBlocks[0].nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
+        expect(firstLayout.getGridTemplate(true, false)).toEqual('repeat(2,1fr)');
+        expect(firstLayout.headerGroup.element.nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
         expect(grid.getColumnByName('Fax').headerCell.elementRef.nativeElement.offsetHeight).toBe(grid.rowHeight + 1);
 
-        expect(groupHeaderBlocks[1].nativeElement.style.gridTemplateRows).toEqual('1fr 1fr');
-        expect(groupHeaderBlocks[1].nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
+        const secondLayout = grid.columnList.toArray()[2];
+        const contactNameColumn = grid.getColumnByName('ContactName');
+        expect(contactNameColumn.getGridTemplate(true, false)).toEqual('repeat(2,1fr)');
+        expect(secondLayout.headerGroup.element.nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
 
         // check cell height in row. By default should span 1 row
         const firstCell = grid.getCellByColumn(0, 'Fax').nativeElement;

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

@@ -715,7 +715,9 @@ export class GridFunctions {
     public static getExcelFilteringPinContainer(fix: ComponentFixture<any>) {
         const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
         const excelMenu = gridNativeElement.querySelector('.igx-excel-filter__menu');
-        return excelMenu.querySelector('.igx-excel-filter__actions-pin');
+        const pinContainer = excelMenu.querySelector('.igx-excel-filter__actions-pin');
+        const pinContainerDisabled = excelMenu.querySelector('.igx-excel-filter__actions-pin--disabled');
+        return pinContainer ? pinContainer : pinContainerDisabled;
     }
 
     public static getExcelFilteringUnpinContainer(fix: ComponentFixture<any>) {