Merge branch 'master' into autocomplete

README.md

@@ -150,7 +150,7 @@ npm start
 
 You can include Ignite UI for Angular in your project as a dependency using the NPM package.
 
-`npm install igniteui-angular --save-dev`
+`npm install igniteui-angular`
 
 ## Contributing
 [Coding Guidelines](../../wiki//Coding-guidelines-for-Ignite-UI-for-Angular)
@@ -164,7 +164,7 @@ The [Crypto Portfolio App](https://github.com/IgniteUI/crypto-portfolio-app) is
 
 To get started with the Data Grid, use the steps in the [grid walk-through](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html).
 
-All help, related API documents and walk-throughs can be found for each control [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html).
+All help, related API documents and walk-throughs can be found for each control [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting_started.html).
 
 ## Roadmap
 [Roadmap document](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md)

extras/docs/themes/sassdoc/assets/js/versioning/tag-versions.req.js

@@ -12,26 +12,25 @@
     }).done((data) =>  {
         let folders = data.folders;
         const select = $('#versions');
-        const lastVersion = folders.slice(-1)[0];
-
         folders = folders.reverse();
+
         folders.forEach(f => {
             select.append($('<option>', {
-                value: `${baseUrl}/angular-docs/${f}/sass`,
+                value: `${baseUrl}/products/ignite-ui-angular/docs/${f}/sass`,
                 text: f
             }));
         });
 
-        select.val(`${baseUrl}/angular-docs/${lastVersion}/sass`);
+        select.val(`${baseUrl}/products/ignite-ui-angular/docs/${folders[0]}/sass`);
 
-        if (sessionStorage.apiVersion) {
-            select.val(sessionStorage.apiVersion);
+        if (sessionStorage.sassOption) {
+            select.val(sessionStorage.sassOption);
         }
     });
 
     $('#versions').on('change', (...rest) => {
         const val = $('#versions').val();
-        sessionStorage.apiVersion = val;
+        sessionStorage.sassOption = val;
         window.location.assign(val);
     });
 })();

extras/docs/themes/typedoc/src/assets/js/src/versioning/tag-versions.req.js

@@ -12,26 +12,25 @@
     }).done((data) =>  {
         let folders = data.folders;
         const select = $('#versions')
-        const lastVersion = folders.slice(-1)[0];
-
         folders = folders.reverse();
+
         folders.forEach(f => {
             select.append($('<option>', {
-                value: `${baseUrl}/angular-docs/${f}/typescript`,
+                value: `${baseUrl}/products/ignite-ui-angular/docs/${f}/typescript`,
                 text: f
             }));
         });
 
-        select.val(`${baseUrl}/angular-docs/${lastVersion}/typescript`);
+        select.val(`${baseUrl}/products/ignite-ui-angular/docs/${folders[0]}/typescript`);
 
-        if (sessionStorage.apiVersion) {
-            select.val(sessionStorage.apiVersion);
+        if (sessionStorage.typedocOption) {
+            select.val(sessionStorage.typedocOption);
         }
     });
 
     $('#versions').on('change', (...rest) => {
         const val = $('#versions').val();
-        sessionStorage.apiVersion = val;
+        sessionStorage.typedocOption = val;
         window.location.assign(val);
     });
 })();

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

@@ -156,6 +156,18 @@
         @extend %grid-cell-header !optional;
     }
 
+    @include e(th, $m: sortable) {
+        @extend %igx-grid__th--sortable !optional;
+    }
+
+    @include e(th, $m: filtrable) {
+        @extend %igx-grid__th--filtrable !optional;
+    }
+
+    @include e(th, $m: sorted) {
+        @extend %igx-grid__th--sorted !optional;
+    }
+
     @include e(th, $m: number) {
         @extend %grid-cell-number !optional;
     }

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

@@ -986,6 +986,23 @@
         border-right: $grid-header-border;
         outline-style: none;
         overflow: hidden;
+        transition: color 250ms ease-in-out;
+    }
+
+    %igx-grid__th--sortable {
+        cursor: pointer;
+
+        %grid-cell-header-title {
+            cursor: pointer;
+        }
+
+        &:hover {
+            color: igx-color($palette, 'grays', 900);
+
+            .sort-icon {
+                opacity: 1;
+            }
+        }
     }
 
     %grid-cell-header--filtering {
@@ -994,6 +1011,16 @@
         z-index: 3;
     }
 
+    %igx-grid__th--filtrable {
+        cursor: pointer;
+
+        &:hover {
+            %grid-cell-header-title {
+                cursor: pointer;
+            }
+        }
+    }
+
     %grid-cell-header--cosy {
         padding: map-get($grid-header-padding, 'cosy');
         min-height: map-get($grid-header-height, 'cosy');
@@ -1040,10 +1067,32 @@
             height: rem(15px);
             min-width: rem(15px); /* yeah IE, it really needs to be 15px wide... */
             font-size: rem(15px);
-            color: igx-color($palette, 'secondary');
+            color: igx-color($palette, 'grays', 500);
+
+            &:hover {
+                color: igx-color($palette, 'secondary', 500);
+            }
+        }
+    }
+
+    %igx-grid__th--sorted {
+        color: igx-color($palette, 'grays', 900);
+
+        .sort-icon {
+            opacity: 1;
+            color: igx-color($palette, 'secondary', 500);
+
+            &:hover {
+                color: igx-color($palette, 'secondary', 600);
+            }
         }
     }
 
+    .sort-icon {
+        opacity: 0;
+        transition: all 250ms ease-in-out;
+    }
+
     %grid-cell-header-icons--cosy {
         height: map-get($grid-header-height, 'cosy');
     }

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

@@ -26,7 +26,7 @@ import {
     Optional
 } from '@angular/core';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, first } from 'rxjs/operators';
 import { IgxSelectionAPIService } from '../core/selection';
 import { cloneArray, isEdge, isNavigationKey, mergeObjects, CancelableEventArgs, flatten } from '../core/utils';
 import { DataType, DataUtil } from '../data-operations/data-util';
@@ -4414,13 +4414,25 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     protected scrollTo(row: any | number, column: any | number): void {
         let rowIndex = typeof row === 'number' ? row : this.filteredSortedData.indexOf(row);
         let columnIndex = typeof column === 'number' ? column : this.getColumnByName(column).visibleIndex;
+        let delayScrolling = false;
 
         if (this.paging) {
-            this.page = Math.floor(rowIndex / this.perPage);
-            rowIndex = rowIndex - this.page * this.perPage;
+            const page = Math.floor(rowIndex / this.perPage);
+            rowIndex = rowIndex - page * this.perPage;
+
+            if (this.page !== page) {
+                delayScrolling = true;
+                this.page = page;
+            }
         }
 
-        this.scrollDirective(this.verticalScrollContainer, rowIndex);
+        if (delayScrolling) {
+            this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
+                this.scrollDirective(this.verticalScrollContainer, rowIndex);
+            });
+        } else {
+            this.scrollDirective(this.verticalScrollContainer, rowIndex);
+        }
 
         const scrollRow = this.rowList.find(r => r.virtDirRow);
         const virtDir = scrollRow ? scrollRow.virtDirRow : null;

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

@@ -7,6 +7,6 @@
     </ng-container>
 </span>
 <div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
-    <igx-icon class="sort-icon" *ngIf="column.sortable">{{sortingIcon}}</igx-icon>
+    <igx-icon class="sort-icon" *ngIf="column.sortable" (click)="onSortingIconClick($event)">{{sortingIcon}}</igx-icon>
 </div>
 

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

@@ -47,6 +47,8 @@ export class IgxGridHeaderComponent implements DoCheck {
             'asc': this.ascending,
             'desc': this.descending,
             'igx-grid__th--number': this.column.dataType === DataType.Number,
+            'igx-grid__th--sortable': this.column.sortable,
+            'igx-grid__th--filtrable': this.column.filterable && this.grid.filteringService.isFilterRowVisible,
             'igx-grid__th--sorted': this.sorted
         };
 
@@ -80,7 +82,7 @@ export class IgxGridHeaderComponent implements DoCheck {
             // are material icons ligature strings
             return this.sortDirection === SortingDirection.Asc ? 'arrow_upward' : 'arrow_downward';
         }
-        return 'none';
+        return 'arrow_upward';
     }
 
     get sorted() {
@@ -129,14 +131,7 @@ export class IgxGridHeaderComponent implements DoCheck {
                     this.grid.filteringService.filteredColumn = this.column;
                 }
             } else if (this.column.sortable) {
-                const groupingExpr = this.grid.groupingExpressions ?
-                    this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) : null;
-                const sortDir = groupingExpr ?
-                    this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.Asc : SortingDirection.Desc
-                    : this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.None : this.sortDirection + 1;
-                this.sortDirection = sortDir;
-                this.grid.sort({ fieldName: this.column.field, dir: this.sortDirection, ignoreCase: this.column.sortingIgnoreCase,
-                    strategy: this.column.sortStrategy });
+                this.triggerSort();
             }
         }
     }
@@ -149,4 +144,22 @@ export class IgxGridHeaderComponent implements DoCheck {
         const expr = this.gridAPI.get(this.gridID).sortingExpressions.find((x) => x.fieldName === this.column.field);
         this.sortDirection = expr ? expr.dir : SortingDirection.None;
     }
+
+    public onSortingIconClick(event) {
+        if (this.grid.filteringService.isFilterRowVisible) {
+            event.stopPropagation();
+            this.triggerSort();
+        }
+    }
+
+    private triggerSort() {
+        const groupingExpr = this.grid.groupingExpressions ?
+            this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) : null;
+        const sortDir = groupingExpr ?
+            this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.Asc : SortingDirection.Desc
+            : this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.None : this.sortDirection + 1;
+        this.sortDirection = sortDir;
+        this.grid.sort({ fieldName: this.column.field, dir: this.sortDirection, ignoreCase: this.column.sortingIgnoreCase,
+            strategy: this.column.sortStrategy });
+    }
 }

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

@@ -45,7 +45,8 @@
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
             <ng-container *ngIf="groupingExpressions.length > 0">
                 <div class="igx-grid__header-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}" #headerGroupContainer>
-                    <igx-icon role="button" class="igx-grid__group-expand-btn" (click)="toggleAllGroupRows()">reorder</igx-icon>
+                    <igx-icon *ngIf="groupsExpanded" role="button" class="igx-grid__group-expand-btn" (click)="toggleAllGroupRows()">unfold_less</igx-icon>
+                    <igx-icon *ngIf="!groupsExpanded" role="button" class="igx-grid__group-expand-btn" (click)="toggleAllGroupRows()">unfold_more</igx-icon>
                 </div>
             </ng-container>
             <ng-container *ngIf="showRowCheckboxes">

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

@@ -351,36 +351,40 @@ describe('IgxGrid - search API', () => {
         });
 
         it('Should scroll properly when using paging', async () => {
+            grid.height = '240px';
             grid.paging = true;
             grid.perPage = 7;
-            const searchString = 'assoc';
             fix.detectChanges();
+            await wait(16);
 
+            const searchString = 'assoc';
             grid.findNext(searchString);
-            grid.findNext(searchString);
-            await wait();
             fix.detectChanges();
+            await wait(16);
 
-            expect(grid.page).toBe(1);
+            expect(grid.page).toBe(0);
             let highlight = grid.nativeElement.querySelector('.' + fix.componentInstance.activeClass);
             expect(highlight).not.toBeNull();
+            expect(grid.nativeElement.querySelectorAll('.' + fix.componentInstance.highlightClass).length).toBe(1);
 
-            grid.findPrev(searchString);
-            await wait();
+            grid.findNext(searchString);
             fix.detectChanges();
+            await wait(16);
 
+            expect(grid.page).toBe(1);
             highlight = grid.nativeElement.querySelector('.' + fix.componentInstance.activeClass);
             expect(highlight).not.toBeNull();
             expect(grid.nativeElement.querySelectorAll('.' + fix.componentInstance.highlightClass).length).toBe(1);
-            expect(grid.page).toBe(0);
+
             grid.findPrev(searchString);
-            await wait();
+            await wait(50);
             fix.detectChanges();
+            await wait(16);
 
+            expect(grid.page).toBe(0);
             highlight = grid.nativeElement.querySelector('.' + fix.componentInstance.activeClass);
             expect(highlight).not.toBeNull();
             expect(grid.nativeElement.querySelectorAll('.' + fix.componentInstance.highlightClass).length).toBe(1);
-            expect(grid.page).toBe(1);
         });
 
         it('Hidden columns shouldn\'t be part of the search', () => {