Merge branch 'master' into mkirova/fix-splitter-export

Author: ChronosSF

.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/checkbox/checkbox.component.html

@@ -34,7 +34,7 @@
     <div class="igx-checkbox__ripple"></div>
 </div>
 
-<span #placeholderLabel role="label"
+<span #placeholderLabel
     [class]="labelClass"
     [id]="labelId"
     (click)="_onLabelClick($event)">

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/core/utils.ts

@@ -335,6 +335,7 @@ export const NAVIGATION_KEYS = new Set([
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
 export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
+export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
 
 /**
  * @hidden

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -543,58 +543,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @Input()
     public outlet: IgxOverlayOutletDirective | ElementRef;
 
-    /**
-     * @deprecated Use 'onOpened' instead.
-     * An event that is emitted when the `IgxDatePickerComponent` calendar is opened.
-     *  @example
-     * ```typescript
-     * public open(event){
-     *     alert("The date-picker calendar has been opened!");
-     * }
-     * ```
-     * ```html
-     * <igx-date-picker (onOpen)="open($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
-     * ```
-     */
-    @DeprecateProperty(`'onOpen' @Output property is deprecated. Use 'onOpened' instead.`)
-    @Output()
-    public get onOpen(): EventEmitter<IgxDatePickerComponent> {
-        return this._onOpen;
-    }
-
-    public set onOpen(val: EventEmitter<IgxDatePickerComponent>) {
-        this._onOpen = val;
-    }
-
     /**
      * Emitted when the `IgxDatePickerComponent` calendar is opened.
      */
     @Output()
     public onOpened = new EventEmitter<IgxDatePickerComponent>();
 
-    /**
-     * @deprecated Use 'onClosed' instead.
-     * "An event that is emitted when the `IgxDatePickerComponent` is closed.
-     *  @example
-     * ```typescript
-     * public close(event){
-     *     alert("The date-picker has been closed!");
-     * }
-     * ```
-     * ```html
-     * <igx-date-picker (onClose)="close($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
-     * ```
-     */
-    @DeprecateProperty(`'onClose' @Output property is deprecated. Use 'onClosed' instead.`)
-    @Output()
-    public get onClose(): EventEmitter<IgxDatePickerComponent> {
-        return this._onClose;
-    }
-
-    public set onClose(val: EventEmitter<IgxDatePickerComponent>) {
-        this._onClose = val;
-    }
-
     /**
      * Emitted after the `IgxDatePickerComponent` is closed.
      */
@@ -1238,9 +1192,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     private _onOpened(): void {
         this.onOpened.emit(this);
 
-        // TODO: remove this line after deprecating 'onOpen'
-        this._onOpen.emit(this);
-
         if (this.calendar) {
             this._focusCalendarDate();
         }
@@ -1250,9 +1201,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         this.collapsed = true;
         this._componentID = null;
         this.onClosed.emit(this);
-
-        // TODO: remove this line after deprecating 'onClose'
-        this.onClose.emit(this);
     }
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.common.ts

@@ -1,11 +1,11 @@
 export interface IgxDateTimeEditorEventArgs {
-    oldValue: Date;
-    newValue: Date;
-    userInput: string;
+    readonly oldValue?: Date;
+    newValue?: Date;
+    readonly userInput: string;
 }
 
 /**
- * An @Enum that allows you to specify a particular date, time or AmPm part.
+ * Specify a particular date, time or AmPm part.
  */
 export enum DatePart {
     Date = 'date',
@@ -18,6 +18,7 @@ export enum DatePart {
     Literal = 'literal'
 }
 
+/** @hidden @internal */
 export interface DatePartInfo {
     type: DatePart;
     start: number;