Merge branch 'master' into jcoitino/fix-bug-7015

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

@@ -25,24 +25,6 @@ export class IgxGridRowComponent extends IgxRowDirective<IgxGridComponent> {
             super(gridAPI, crudService, selectionService, element, cdr);
         }
 
-    @ViewChildren('cell')
-    private _cells: QueryList<any>;
-
-    public get cells() {
-        const res = new QueryList<any>();
-        if (!this._cells) {
-            return res;
-        }
-        const cList = this._cells.filter((item) => item.nativeElement.parentElement !== null)
-        .sort((item1, item2) => item1.column.visibleIndex - item2.column.visibleIndex);
-        res.reset(cList);
-        return res;
-    }
-
-    public set cells(cells) {
-
-    }
-
     @HostBinding('class.igx-grid__tr--mrl')
     get hasColumnLayouts(): boolean {
         return this.grid.hasColumnLayouts;

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

@@ -402,8 +402,10 @@ describe('IgxGrid - Grid Toolbar #grid', () => {
 
         const button = getColumnPinningButton(fixture);
         expect(button).toBeDefined();
+        const icon = button.nativeElement.querySelector('igx-icon');
+        const iconName = icon.getAttribute('name');
         const btnText = button.nativeElement.innerText.toLowerCase();
-        expect(btnText.includes('0') && btnText.includes('lock_open')).toBe(true);
+        expect(btnText.includes('0') && iconName === 'unpin').toBe(true);
     });
 
     it('toggleColumnPinningUI() method opens and closes the ColumnPinning dropdown.', () => {

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

@@ -14,7 +14,7 @@ import { IGridCellEventArgs } from '../common/events';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnPinningPosition } from '../common/enums';
 import { IPinningConfig } from '../common/grid.interface';
-import { wait } from '../../test-utils/ui-interactions.spec';
+import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 
 describe('IgxGrid - Column Pinning #grid', () => {
@@ -23,6 +23,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
     const FIXED_HEADER_CSS = 'igx-grid__th--pinned';
     const FIXED_CELL_CSS = 'igx-grid__td--pinned';
     const FIRST_PINNED_CELL_CSS = 'igx-grid__td--pinned-first';
+    const DEBOUNCETIME = 30;
 
     describe('To Start', () => {
         configureTestSuite();
@@ -417,6 +418,39 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(grid.pinnedColumns.length).toEqual(1);
             expect(grid.unpinnedColumns.length).toEqual(2);
         }));
+
+        it('should allow navigating to/from pinned area', (async() => {
+            pending('https://github.com/IgniteUI/igniteui-angular/pull/6910');
+            const fix = TestBed.createComponent(DefaultGridComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.instance;
+
+            const cellContactName = grid.getCellByColumn(0, 'ContactName');
+            const range = {
+                rowStart: cellContactName.rowIndex,
+                rowEnd: cellContactName.rowIndex,
+                columnStart: cellContactName.visibleColumnIndex,
+                columnEnd: cellContactName.visibleColumnIndex
+            };
+            grid.selectRange(range);
+            grid.navigation.activeNode = {row: cellContactName.rowIndex, column: cellContactName.visibleColumnIndex};
+            fix.detectChanges();
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+
+            const cellID = grid.getCellByColumn(0, 'ID');
+            expect(cellID.active).toBe(true);
+            expect(cellContactName.active).toBe(false);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+
+            expect(cellID.active).toBe(false);
+            expect(cellContactName.active).toBe(true);
+        }));
     });
 
     describe('To End', () => {
@@ -639,6 +673,61 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(fistPinnedHeaders.classes['igx-grid__mrl-block']).toBeTruthy();
             expect(fistPinnedHeaders.classes['igx-grid__th--pinned-first']).toBeTruthy();
         });
+
+        it('should allow navigating to/from pinned area', (async() => {
+            pending('https://github.com/IgniteUI/igniteui-angular/pull/6910');
+            const fix = TestBed.createComponent(GridRightPinningComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.instance as any;
+
+            const cellCompanyName = grid.getCellByColumn(0, 'CompanyName');
+            const range = { rowStart: 0, rowEnd: 0, columnStart: 9, columnEnd: 9 };
+            grid.selectRange(range);
+            grid.navigation.activeNode = {row: 0, column: 9};
+            fix.detectChanges();
+            expect(cellCompanyName.active).toBe(true);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellFax = grid.getCellByColumn(0, 'Fax');
+            expect(cellFax.active).toBe(true);
+            expect(cellCompanyName.active).toBe(false);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            expect(cellFax.active).toBe(false);
+            expect(cellCompanyName.active).toBe(true);
+        }));
+
+        it('should allow navigating to/from pinned area using Ctrl+Left/Right', (async() => {
+            pending('https://github.com/IgniteUI/igniteui-angular/pull/6910');
+            const fix = TestBed.createComponent(GridRightPinningComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.instance as any;
+
+            const cellCompanyName = grid.getCellByColumn(0, 'CompanyName');
+            const range = { rowStart: 0, rowEnd: 0, columnStart: 9, columnEnd: 9 };
+            grid.selectRange(range);
+            grid.navigation.activeNode = {row: 0, column: 9};
+            fix.detectChanges();
+            expect(cellCompanyName.active).toBe(true);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft', false, false, true));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellID = grid.getCellByColumn(0, 'ID');
+            expect(cellID.active).toBe(true);
+            expect(cellCompanyName.active).toBe(false);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight', false, false, true));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellContactName = grid.getCellByColumn(0, 'ContactName');
+            expect(cellID.active).toBe(false);
+            expect(cellContactName.active).toBe(true);
+        }));
     });
 });
 

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

@@ -151,7 +151,6 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
     }));
 
     it('should allow navigating to start in child grid when child grid target row moves outside the parent view port.', (async () => {
-        pending('related to the bug #7091');
         hierarchicalGrid.verticalScrollContainer.scrollTo(2);
         await wait(DEBOUNCE_TIME);
         fixture.detectChanges();

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts

@@ -21,16 +21,8 @@ import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component'
     providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }]
 })
 export class IgxHierarchicalRowComponent extends IgxRowDirective<IgxHierarchicalGridComponent> {
-    /**
-     * The rendered cells in the row component.
-     *
-     * ```typescript
-     * // get the cells of the third selected row
-     * let selectedRowCells = this.grid.selectedRows[2].cells;
-     * ```
-     */
     @ViewChildren(forwardRef(() => IgxHierarchicalGridCellComponent), { read: IgxHierarchicalGridCellComponent })
-    public cells: QueryList<IgxHierarchicalGridCellComponent>;
+    protected _cells: QueryList<IgxHierarchicalGridCellComponent>;
 
     @ViewChild('expander', { read: ElementRef })
     public expander: ElementRef<HTMLElement>;

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -100,16 +100,31 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
     @ViewChild(forwardRef(() => IgxCheckboxComponent), { read: IgxCheckboxComponent })
     public checkboxElement: IgxCheckboxComponent;
 
+    @ViewChildren('cell')
+    protected _cells: QueryList<any>;
+
     /**
-     * The rendered cells in the row component.
+     * Gets the rendered cells in the row component.
      *
      * ```typescript
      * // get the cells of the third selected row
      * let selectedRowCells = this.grid.selectedRows[2].cells;
      * ```
      */
-    @ViewChildren(forwardRef(() => IgxGridCellComponent))
-    public cells: QueryList<IgxGridCellComponent>;
+    public get cells() {
+        const res = new QueryList<any>();
+        if (!this._cells) {
+            return res;
+        }
+        const cList = this._cells.filter((item) => item.nativeElement.parentElement !== null)
+        .sort((item1, item2) => item1.column.visibleIndex - item2.column.visibleIndex);
+        res.reset(cList);
+        return res;
+    }
+
+    public set cells(cells) {
+
+    }
 
     /**
      * @hidden

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

@@ -45,8 +45,8 @@
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxRipple
             (click)="toggleColumnPinningUI()">
             <div  class="igx-grid-toolbar__button-space">
-                <igx-icon *ngIf="pinnedColumnsCount > 0">lock</igx-icon>
-                <igx-icon *ngIf="pinnedColumnsCount === 0">lock_open</igx-icon>
+                <igx-icon *ngIf="pinnedColumnsCount > 0" fontSet="filtering-icons" name="pin"></igx-icon>
+                <igx-icon *ngIf="pinnedColumnsCount === 0" fontSet="filtering-icons" name="unpin"></igx-icon>
                 <span>{{ pinnedColumnsCount }}</span>
                 <span>{{ grid.pinnedColumnsText }}</span>
                 <span></span>

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

@@ -6,7 +6,8 @@ import {
     Optional,
     ViewChild,
     Inject,
-    TemplateRef
+    TemplateRef,
+    AfterViewInit
 } from '@angular/core';
 
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity';
@@ -28,6 +29,10 @@ import { IgxColumnPinningComponent } from '../pinning/column-pinning.component';
 import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignment } from '../../services/overlay/utilities';
 import { ConnectedPositioningStrategy } from '../../services/overlay/position';
 import { GridType } from '../common/grid.interface';
+import { IgxIconService } from '../../icon/icon.service';
+import icons from './../filtering/svgIcons';
+
+const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 
 /**
  * This class encapsulates the Toolbar's logic and is internally used by
@@ -37,7 +42,7 @@ import { GridType } from '../common/grid.interface';
     selector: 'igx-grid-toolbar',
     templateUrl: './grid-toolbar.component.html'
 })
-export class IgxGridToolbarComponent extends DisplayDensityBase {
+export class IgxGridToolbarComponent extends DisplayDensityBase implements AfterViewInit {
     /**
      * @hidden
      */
@@ -229,7 +234,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
         public cdr: ChangeDetectorRef,
         @Optional() public excelExporter: IgxExcelExporterService,
         @Optional() public csvExporter: IgxCsvExporterService,
-        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
+        private iconService: IgxIconService) {
             super(_displayDensityOptions);
     }
 
@@ -391,4 +397,17 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
             return null;
         }
     }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    ngAfterViewInit() {
+        const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin');
+        for (const icon of pinnedIcons) {
+            if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
+                this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
+            }
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts

@@ -13,16 +13,8 @@ import { IgxTreeGridAPIService } from './tree-grid-api.service';
 export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponent> implements DoCheck {
     private _treeRow: ITreeGridRecord;
 
-    /**
-     * The rendered cells in the row component.
-     *
-     * ```typescript
-     * const row = this.grid.getRowByKey(1);
-     * const cells = row.cells;
-     * ```
-     */
     @ViewChildren('treeCell')
-    public cells: QueryList<any>;
+    protected _cells: QueryList<any>;
 
     /**
      * The `ITreeGridRecord` passed to the row component.