Merge branch 'master' into dpetev/date-time-editor-misc

Author: Lipata

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,12 +9,12 @@ Closes #
 
 ### Checklist:
  - [ ] All relevant tags have been applied to this PR
- - [ ] This PR includes unit tests covering all the new code
- - [ ] This PR includes API docs for newly added methods/properties
+ - [ ] This PR includes unit tests covering all the new code ([test guidelines](https://github.com/IgniteUI/igniteui-angular/wiki/Test-implementation-guidelines-for-Ignite-UI-for-Angular))
+ - [ ] This PR includes API docs for newly added methods/properties ([api docs guidelines](https://github.com/IgniteUI/igniteui-angular/wiki/Documentation-Guidelines))
  - [ ] This PR includes `feature/README.MD` updates for the feature docs
  - [ ] This PR includes general feature table updates in the root `README.MD`
  - [ ] This PR includes `CHANGELOG.MD` updates for newly added functionality
  - [ ] This PR contains breaking changes
- - [ ] This PR includes `ng update` migrations for the breaking changes
+ - [ ] This PR includes `ng update` migrations for the breaking changes ([migrations guidelines](https://github.com/IgniteUI/igniteui-angular/wiki/Update-Migrations))
  - [ ] This PR includes behavioral changes and the feature specification has been updated with them
 

CHANGELOG.md

@@ -64,6 +64,18 @@ All notable changes for each version of this project will be documented in this
     - `deselectColumns` API method is added for the `IgxGrid`. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
     - `deselectAllColumns` API method is added for the `IgxGrid`. It allows to deselect all columns.
     - `getSelectedColumnsData` API method is added for the `IgxGrid`. It allows to get the selected columns data.
+    Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the [Grid Specification](https://github.com/IgniteUI/igniteui-angular/wiki/igxGrid-Specification#kb-navigation).
+    - **Behavioral Change**
+        - *you can not use* `tab` key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
+        - when you are in edit mode with `tab` key you can navigate to the next editable cell.
+        - `page up` and `page down` keys will perform action only if the focused element is the tbody of the grid.
+        - The grid introduces the following basic `tab stops`:
+            - Toolbar / Group by Area if existing;
+            - The first cell in the header row;
+            - The first cell in the first body row;
+            - The first cell in column summary if exists;
+            - Pager UI;
+    - `onGridKeydown` event is deprecated. Now you can directly bind to keydown on the IgxGrid component in order to perform custom keyboard navigation.
 
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -1216,19 +1216,21 @@ describe('igxCombo', () => {
                 fixture.detectChanges();
                 let items = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
                 let lastItem = items[items.length - 1].componentInstance;
+                let lastItemIndex = lastItem.index;
                 expect(lastItem).toBeDefined();
                 lastItem.clicked(mockClick);
                 await wait(30);
                 fixture.detectChanges();
-                expect(dropdown.focusedItem).toEqual(lastItem);
+                expect(dropdown.focusedItem.index).toEqual(lastItemIndex);
                 dropdown.navigateItem(-1);
                 await wait(30);
                 fixture.detectChanges();
                 expect(virtualMockDOWN).toHaveBeenCalledTimes(0);
+                lastItemIndex = lastItem.index;
                 lastItem.clicked(mockClick);
                 await wait(30);
                 fixture.detectChanges();
-                expect(dropdown.focusedItem).toEqual(lastItem);
+                expect(dropdown.focusedItem.index).toEqual(lastItemIndex);
                 dropdown.navigateNext();
                 await wait(30);
                 fixture.detectChanges();

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

@@ -212,6 +212,10 @@
         @extend %igx-grid__tr-container !optional;
     }
 
+    @include e(tr-container, $m: active) {
+        @extend %igx-grid__tr-container--active !optional;
+    }
+
     @include e(th) {
         @extend %grid-cell-display !optional;
         @extend %grid-cell-header !optional;
@@ -253,6 +257,10 @@
         @extend %igx-grid__th--selected !optional;
     }
 
+    @include e(th, $m: active) {
+        @extend %igx-grid__th--active !optional;
+    }
+
     @include e(th, $m: number) {
         @extend %grid-cell-number !optional;
     }
@@ -798,7 +806,7 @@
         @include e(hierarchical-expander) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
         }
-        
+
         @include e(hierarchical-expander, $m: empty) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
             @extend %igx-grid__hierarchical-expander--empty !optional;
@@ -874,3 +882,9 @@
         @extend %igx-group-label__count-badge !optional;
     }
 }
+
+@include b(igx-grid-summary) {
+    @include m(active) {
+        @extend %igx-grid-summary--active !optional;
+    }
+}

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

@@ -732,6 +732,7 @@
         background: --var($theme, 'header-background');
         color: --var($theme, 'header-text-color');
         overflow: hidden;
+        outline-style: none;
 
         %grid-row {
             position: relative;
@@ -918,6 +919,7 @@
         color: --var($theme, 'content-text-color');
         overflow: hidden;
         z-index: 1;
+        outline-style: none;
     }
 
     %grid-tbody-container {
@@ -1322,8 +1324,6 @@
         // border-bottom: 0;
 
         %igx-grid__tree-grouping-indicator {
-            color: --var($theme, 'cell-selected-text-color');
-
             &:hover {
                 color: --var($theme, 'cell-selected-text-color');
             }
@@ -1543,6 +1543,19 @@
         background: --var($theme, 'header-selected-background');
     }
 
+    %igx-grid__th--active {
+        @extend %grid-cell--active;
+
+        %igx-grid__th--selected,
+        %igx-grid__th--selectable {
+            @extend %grid-cell--active
+        }
+    }
+
+    %igx-grid-summary--active {
+        @extend %grid-cell--active
+    }
+
     %igx-grid__th--sortable {
         .sort-icon {
             cursor: pointer;
@@ -1842,6 +1855,7 @@
 
     %igx-grid__group-row--active {
         background: --var($theme, 'group-row-selected-background');
+        @extend %grid-cell--active;
 
         %igx-grid__grouping-indicator {
             color: --var($theme, 'expand-icon-color');
@@ -2092,7 +2106,6 @@
         user-select: none;
         justify-content: center;
         align-items: center;
-        background: inherit;
         z-index: 1;
         cursor: pointer;
         padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');
@@ -2484,6 +2497,10 @@
         border-bottom: 1px solid --var($theme, 'row-border-color');
     }
 
+    %igx-grid__tr-container--active {
+        @extend %grid-cell--active;
+    }
+
     %igx-grid__hierarchical-expander {
         user-select: none;
         background: inherit;

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -853,63 +853,17 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         if (newStart + this.state.chunkSize > count) {
             newStart = count - this.state.chunkSize;
         }
-        const prevStart = this.state.startIndex;
         const diff = newStart - this.state.startIndex;
         this.state.startIndex = newStart;
         if (diff) {
             this.onChunkPreload.emit(this.state);
             if (!this.isRemote) {
-                /*recalculate and apply page size.*/
-                if (diff > 0 && diff <= this.MAX_PERF_SCROLL_DIFF) {
-                    this.moveApplyScrollNext(prevStart);
-                } else if (diff < 0 && Math.abs(diff) <= this.MAX_PERF_SCROLL_DIFF) {
-                    this.moveApplyScrollPrev(prevStart);
-                } else {
-                    this.fixedApplyScroll();
-                }
+                this.fixedApplyScroll();
             }
         }
         return inScrollTop - this.sizesCache[this.state.startIndex];
     }
 
-    /**
-     * @hidden
-     * The function applies an optimized state change for scrolling down/right employing context change with view rearrangement
-     */
-    protected moveApplyScrollNext(prevIndex: number): void {
-        const start = prevIndex + this.state.chunkSize;
-        for (let i = start; i < start + this.state.startIndex - prevIndex && this.igxForOf[i] !== undefined; i++) {
-            this._moveApply(i);
-        }
-    }
-
-    /**
-     *
-     */
-    protected _moveApply(contextIndex: number, topPosition = false) {
-        const context = this.igxForOf[contextIndex];
-        const forOfContext = new IgxForOfContext<T>(context, this.getContextIndex(context), this.igxForOf.length);
-        const view = this.dc.instance._vcr.createEmbeddedView(this._template, forOfContext, topPosition ? 0 : undefined);
-        this.dc.instance._vcr.detach(topPosition ? this.dc.instance._vcr.length - 1 : 0);
-        if (topPosition) {
-            this._embeddedViews.pop();
-            this._embeddedViews.unshift(view);
-        } else {
-            this._embeddedViews.shift();
-            this._embeddedViews.push(view);
-        }
-    }
-
-    /**
-     * @hidden
-     * The function applies an optimized state change for scrolling up/left employing context change with view rearrangement
-     */
-    protected moveApplyScrollPrev(prevIndex: number): void {
-        for (let i = prevIndex - 1; i >= this.state.startIndex && this.igxForOf[i] !== undefined; i--) {
-            this._moveApply(i, true);
-        }
-    }
-
     /**
      * @hidden
      */

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

@@ -11,21 +11,21 @@
 <ng-template #inlineEditor let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" />
+            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" />
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" type="number">
+            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" type="number">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue"
-            [igxFocus]="true" [disableRipple]="true"></igx-checkbox>
+            [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
         <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
-            [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
+            [locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
         </igx-date-picker>
     </ng-container>
 </ng-template>

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -227,17 +227,17 @@ export class IgxGridRowPinningPipe implements PipeTransform {
     public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
         const grid = this.gridAPI.grid;
 
-        if (!grid.hasPinnedRecords) {
-            return isPinned ? [] : collection;
-        }
-
         if (grid.hasPinnedRecords && isPinned) {
             const result = collection.filter(rec => grid.isRecordPinned(rec));
             result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
             return result;
         }
 
         grid.unpinnedRecords = collection;
+        if (!grid.hasPinnedRecords) {
+            grid.pinnedRecords = [];
+            return isPinned ? [] : collection;
+        }
 
         return collection.map((rec) => {
             return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;

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

@@ -10,7 +10,6 @@ import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
 import { GridBaseAPIService } from '../api.service';
-import { IColumnVisibilityChangedEventArgs } from '../grid';
 import { IColumnResizeEventArgs } from '../common/events';
 import { GridType } from '../common/grid.interface';
 import { IgxDatePipeComponent } from '../common/pipes';
@@ -20,7 +19,6 @@ import { useAnimation } from '@angular/animations';
 import { fadeIn, fadeOut } from '../../animations/main';
 import { ExcelStylePositionStrategy } from './excel-style/excel-style-position-strategy';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
-import { IgxGridExcelStyleFilteringComponent } from './excel-style/grid.excel-style-filtering.component';
 
 const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 
@@ -69,7 +67,7 @@ export class IgxFilteringService implements OnDestroy {
         this.destroy$.complete();
     }
 
-    public toggleFilterDropdown(element, column) {
+    public toggleFilterDropdown(element, column, classRef) {
         if (!this._componentOverlayId || (this.column  && this.column.field !== column.field)) {
             this.column = column;
             const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
@@ -78,7 +76,7 @@ export class IgxFilteringService implements OnDestroy {
             this._filterMenuOverlaySettings.positionStrategy.settings.target = filterIconTarget;
             this._filterMenuOverlaySettings.outlet = (this.grid as any).outlet;
             this._componentOverlayId =
-                this._overlayService.attach(IgxGridExcelStyleFilteringComponent, this._filterMenuOverlaySettings, this._moduleRef);
+                this._overlayService.attach(classRef, this._filterMenuOverlaySettings, this._moduleRef);
             this._overlayService.show(this._componentOverlayId, this._filterMenuOverlaySettings);
         }
     }
@@ -98,7 +96,7 @@ export class IgxFilteringService implements OnDestroy {
         this._overlayService.onOpening.pipe(
             filter((overlay) => overlay.id === this._componentOverlayId),
             takeUntil(this.destroy$)).subscribe((eventArgs) => {
-                const instance = eventArgs.componentRef.instance as IgxGridExcelStyleFilteringComponent;
+                const instance = eventArgs.componentRef.instance as any;
                 if (instance) {
                     instance.initialize(this.column, this._overlayService, eventArgs.id);
                 }
@@ -107,7 +105,6 @@ export class IgxFilteringService implements OnDestroy {
         this._overlayService.onClosed.pipe(
             filter(overlay => overlay.id === this._componentOverlayId),
             takeUntil(this.destroy$)).subscribe(() => {
-                console.log('Close');
                 this._componentOverlayId = null;
                 this.grid.theadRow.nativeElement.focus();
             });