Merge branch 'master' into 12.0.x

Author: kdinev

CHANGELOG.md

@@ -146,6 +146,13 @@ All notable changes for each version of this project will be documented in this
 - `IgxLinearProgressBarComponent`
     - **Breaking Change** - The following outputs are renamed:
         - `onProgressChanged` to `progressChanged`
+- `IgxToast`
+    - **Breaking Change** - The following deprecated methods and outputs have been removed
+        - Outputs `showing`, `shown`, `hiding`, `hidden`. Use `onOpening`, `onOpened`, `onClosing`, `onClosed` instead.
+        - Methods `show`, `hide`. Use `open`, `close` instead.
+- `IgxSnackbar`
+    - **Breaking Change** - The following deprecated methods have been removed
+        - `show`, `hide`. Use `open`, `close` instead.
 
 
 ### New Features

README.md

@@ -2,7 +2,6 @@
 
 ![Node.js CI](https://github.com/IgniteUI/igniteui-angular/workflows/Node.js%20CI/badge.svg)
 [![Build Status](https://dev.azure.com/IgniteUI/igniteui-angular/_apis/build/status/IgniteUI.igniteui-angular)](https://dev.azure.com/IgniteUI/igniteui-angular/_build/latest?definitionId=3)
-[![Build Status](https://travis-ci.org/IgniteUI/igniteui-angular.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-angular)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-angular/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-angular?branch=master)
 [![npm version](https://badge.fury.io/js/igniteui-angular.svg)](https://badge.fury.io/js/igniteui-angular)
 

ROADMAP.md

@@ -8,13 +8,13 @@
 2. **[DONE]** Themes: Scope custom CSS props to component selectors [#8868](https://github.com/IgniteUI/igniteui-angular/issues/8868)
 3. **[DONE]** Switch thumb templatable and add indeterminate state [#8949](https://github.com/IgniteUI/igniteui-angular/issues/8949)
 4. **[DONE]** IgxDateTimeEditor should support spin delta [#7169](https://github.com/IgniteUI/igniteui-angular/issues/7169)
-5. Expose a column input for passing additional data/state in the template contexts of the column [#9020](https://github.com/IgniteUI/igniteui-angular/issues/9020)
+5. **[DONE]** Expose a column input for passing additional data/state in the template contexts of the column [#9020](https://github.com/IgniteUI/igniteui-angular/issues/9020)
 6. **[DONE]** Export Hierarchical Grid to Excel [#5848](https://github.com/IgniteUI/igniteui-angular/issues/5848)
-7. Tree component [#7475](https://github.com/IgniteUI/igniteui-angular/issues/7475)
-8. IgxDatePicker refactoring [#6483](https://github.com/IgniteUI/igniteui-angular/issues/6483)
-9. IgxTimePicker refactoring [#6482](https://github.com/IgniteUI/igniteui-angular/issues/6482)
+7. **[DONE]** Tree component [#7475](https://github.com/IgniteUI/igniteui-angular/issues/7475)
+8. **[DONE]** IgxDatePicker refactoring [#6483](https://github.com/IgniteUI/igniteui-angular/issues/6483)
+9. **[DONE]** IgxTimePicker refactoring [#6482](https://github.com/IgniteUI/igniteui-angular/issues/6482)
 10. **[DONE]** Tabs and Bottom Nav Components Refactoring [#8793](https://github.com/IgniteUI/igniteui-angular/issues/8793)
-11. Datetime and Time column types [#7678](https://github.com/IgniteUI/igniteui-angular/issues/7678)
+11. **[DONE]** Datetime and Time column types [#7678](https://github.com/IgniteUI/igniteui-angular/issues/7678)
 12. **[DONE]** Add detach method to IgxOverlay [#6063](https://github.com/IgniteUI/igniteui-angular/issues/6063)
 13. **[DONE]** Accept ISO 8601 Date-only string as input for IgxDateTimeEditorDirective [#6994](https://github.com/IgniteUI/igniteui-angular/issues/6994)
 
@@ -27,7 +27,7 @@
 
 # Previous Milestone
 
-## Milestone 15 (Due by February, 2021)
+## Milestone 15 (Released February 17th, 2021)
 
 1. **[DONE]** Filters should support filtering by formatted value [#8009](https://github.com/IgniteUI/igniteui-angular/issues/8009)
 2. **[DONE]** Support changing theme dynamically on Input Group [#8619](https://github.com/IgniteUI/igniteui-angular/issues/8619)
@@ -72,7 +72,7 @@
 16. **[DONE]** Allow setting of the name of the worksheet in exported workbook in IgxExcelExporter [#7396](https://github.com/IgniteUI/igniteui-angular/issues/7396)
 17. **[DONE]** Enhance behavior of the Select All checkbox in Excel Style Filtering [#6617](https://github.com/IgniteUI/igniteui-angular/issues/6617)
 
-## Milestone 12 (Due by August 17th, 2020)
+## Milestone 12 (Released August 19th, 2020)
 
 1. **[DONE]** igx-grid improve IGridEditEventArgs [#4965](https://github.com/IgniteUI/igniteui-angular/issues/4965)
 2. **[DONE]** igxCombo has to include caseSensitive property in filter search [#7282](https://github.com/IgniteUI/igniteui-angular/issues/7282)

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

@@ -1210,6 +1210,7 @@
 
     %igx-grid__tr--inner {
         display: flex;
+        background: inherit;
     }
 
     %igx-grid__tr--add-animate {

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -302,7 +302,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
      * Offsets the content along the corresponding axis by the provided amount
      */
-    setOffset(deltaX: number, deltaY: number) {
+    public setOffset(deltaX: number, deltaY: number) {
         this.overlayService.setOffset(this._overlayId, deltaX, deltaY);
     }
 
@@ -335,8 +335,8 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         this.cdr.detectChanges();
         this.unsubscribe();
         this.overlayService.detach(this.overlayId);
-        delete this._overlayId;
         const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event };
+        delete this._overlayId;
         this.onClosed.emit(closedEventArgs);
     };
 
@@ -428,7 +428,7 @@ export class IgxToggleActionDirective implements OnInit {
      * @hidden
      */
     @Input('igxToggleAction')
-    set target(target: any) {
+    public set target(target: any) {
         if (target !== null && target !== '') {
             this._target = target;
         }
@@ -437,7 +437,7 @@ export class IgxToggleActionDirective implements OnInit {
     /**
      * @hidden
      */
-    get target(): any {
+    public get target(): any {
         if (typeof this._target === 'string') {
             return this.navigationService.get(this._target);
         }

projects/igniteui-angular/src/lib/grids/selection/selection.service.ts

@@ -62,6 +62,12 @@ export class IgxGridSelectionService {
      */
     public selectedRowsChange = new Subject();
 
+    /**
+     * Toggled when a pointerdown event is triggered inside the grid body (cells).
+     * When `false` the drag select behavior is disabled.
+     */
+    private pointerEventInGridBody = false;
+
     private allRowsSelected: boolean;
     private _ranges: Set<string> = new Set<string>();
     private _selectionRange: Range;
@@ -265,6 +271,8 @@ export class IgxGridSelectionService {
         this.initKeyboardState();
         this.pointerState.ctrl = ctrl;
         this.pointerState.shift = shift;
+        this.pointerEventInGridBody = true;
+        document.body.addEventListener('pointerup', this.pointerOriginHandler);
 
         // No ctrl key pressed - no multiple selection
         if (!ctrl) {
@@ -311,7 +319,7 @@ export class IgxGridSelectionService {
 
     public pointerEnter(node: ISelectionNode, event: PointerEvent): boolean {
         // https://www.w3.org/TR/pointerevents/#the-button-property
-        this.dragMode = event.buttons === 1 && (event.button === -1 || event.button === 0);
+        this.dragMode = (event.buttons === 1 && (event.button === -1 || event.button === 0)) && this.pointerEventInGridBody;
         if (!this.dragMode) {
             return false;
         }
@@ -351,7 +359,9 @@ export class IgxGridSelectionService {
             return true;
         }
 
-        this.add(node);
+        if (this.pointerEventInGridBody) {
+            this.add(node);
+        }
         return false;
     }
 
@@ -727,6 +737,11 @@ export class IgxGridSelectionService {
     private isRowDeleted(rowID): boolean {
         return this.grid.gridAPI.row_deleted_transaction(rowID);
     }
+
+    private pointerOriginHandler = () => {
+        this.pointerEventInGridBody = false;
+        document.body.removeEventListener('pointerup', this.pointerOriginHandler);
+    };
 }
 
 export const isChromium = (): boolean => (/Chrom|e?ium/g.test(navigator.userAgent) ||

projects/igniteui-angular/src/lib/snackbar/README.md

@@ -8,7 +8,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 ## Simple Snackbar
 
 ```html
-<button (click)="snackbar.show()">Show snackbar</button>
+<button (click)="snackbar.open()">Show snackbar</button>
 
 <igx-snackbar #snackbar
             message="This is a simple snackbar!">
@@ -17,25 +17,25 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 You can be more descriptive and set a message `message="This is a simple snackbar!"`.
 
-You can show the snackbar by using `snackbar.show()` method.
+You can show the snackbar by using `snackbar.open()` method.
 
 
 ## Snackbar with button and action
 
 ```html
-<button (click)="snackbar.show()">Show snackbar</button>
+<button (click)="snackbar.open()">Show snackbar</button>
 
 <igx-snackbar #snackbar
              message="This is a snackbar with a button and action!"
              actionName="Dismiss"
-             (onAction)="snackbar.hide()">
+             (onAction)="snackbar.close()">
 </igx-snackbar>
 ```
 You can set the id of the component by `id="Snackbar"`, otherwise it will be automatically generated.
 
 You can set the title of the button by setting `actionName="Dismiss"`.
 
-You can hide the Snackbar by using `snackbar.hide()` method.
+You can hide the Snackbar by using `snackbar.close()` method.
 
 By default, the IgxSnackbar will be automatically hidden after 4000 milliseconds. The automatic hiding behavior can be controlled via the following attributes:
  - `autoHide` - whether the snackbar should be hidden after a certain time interval.
@@ -45,11 +45,11 @@ By default, the IgxSnackbar will be automatically hidden after 4000 milliseconds
 ## Snackbar with custom content
 
 ```html
-<button (click)="snackbar.show()">Show snackbar</button>
+<button (click)="snackbar.open()">Show snackbar</button>
 
 <igx-snackbar #snackbar
              actionName="Dismiss"
-             (onAction)="snackbar.hide()">
+             (onAction)="snackbar.close()">
     <span>Custom content</span>
 </igx-snackbar>
 ```

projects/igniteui-angular/src/lib/snackbar/snackbar.component.ts

@@ -14,7 +14,7 @@ import {
     Output
 } from '@angular/core';
 import { fadeIn, fadeOut, slideInBottom, slideOutBottom } from '../animations/main';
-import { DeprecateMethod, DeprecateProperty } from '../core/deprecateDecorators';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 /**
@@ -223,30 +223,6 @@ export class IgxSnackbarComponent {
 
     constructor() { }
 
-    /**
-     * @deprecated
-     * Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`.
-     * ```typescript
-     * this.snackbar.show();
-     * ```
-     */
-    @DeprecateMethod(`'show' is deprecated. Use 'open' method instead.`)
-    public show(message?: string): void {
-        this.open(message);
-    }
-
-    /**
-     * @deprecated
-     * Hides the snackbar.
-     * ```typescript
-     * this.snackbar.hide();
-     * ```
-     */
-    @DeprecateMethod(`'hide' is deprecated. Use 'close' method instead.`)
-    public hide(): void {
-        this.close();
-    }
-
     /**
      * Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`.
      * ```typescript

projects/igniteui-angular/src/lib/tabs/tabs.directive.ts

@@ -192,6 +192,40 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
     protected scrollTabHeaderIntoView() {
     }
 
+    /** @hidden */
+    protected onItemChanges() {
+        this.setAttributes();
+
+        if (this.selectedIndex >= 0 && this.selectedIndex < this.items.length) {
+
+            // Check if there is selected tab
+            let selectedIndex = -1;
+            this.items.some((tab, i) => {
+                if (tab.selected) {
+                    selectedIndex = i;
+                }
+                return tab.selected;
+            });
+
+            if (selectedIndex >= 0) {
+                // Select the same tab that was previously selected
+                Promise.resolve().then(() => {
+                    this.selectedIndex = selectedIndex;
+                });
+            } else {
+                // Select the tab on the same index the previous selected tab was
+                Promise.resolve().then(() => {
+                    this.updateSelectedTabs(null);
+                });
+            }
+        } else if (this.selectedIndex >= this.items.length) {
+            // Select the last tab
+            Promise.resolve().then(() => {
+                this.selectedIndex = this.items.length - 1;
+            });
+        }
+    }
+
     private setAttributes() {
         this.items.forEach(item => {
             if (item.panelComponent && !item.headerComponent.nativeElement.getAttribute('id')) {
@@ -253,39 +287,6 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
         }
     }
 
-    private onItemChanges() {
-        this.setAttributes();
-
-        if (this.selectedIndex >= 0 && this.selectedIndex < this.items.length) {
-
-            // Check if there is selected tab
-            let selectedIndex = -1;
-            this.items.some((tab, i) => {
-                if (tab.selected) {
-                    selectedIndex = i;
-                }
-                return tab.selected;
-            });
-
-            if (selectedIndex >= 0) {
-                // Select the same tab that was previously selected
-                Promise.resolve().then(() => {
-                    this.selectedIndex = selectedIndex;
-                });
-            } else {
-                // Select the tab on the same index the previous selected tab was
-                Promise.resolve().then(() => {
-                    this.updateSelectedTabs(null);
-                });
-            }
-        } else if (this.selectedIndex >= this.items.length) {
-            // Select the last tab
-            Promise.resolve().then(() => {
-                this.selectedIndex = this.items.length - 1;
-            });
-        }
-    }
-
     private triggerPanelAnimations(oldSelectedIndex: number) {
         const item = this.items.get(this._selectedIndex);
 

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.html

@@ -1,8 +1,8 @@
 <div #headerContainer class="igx-tabs__header">
     <button
+        #leftButton
         igxButton="icon"
         igxRipple
-        igxLeftButtonStyle
         class="igx-tabs__header-button"
         (click)="scrollLeft()"
     >
@@ -26,9 +26,9 @@
         </div>
     </div>
     <button
+        #rightButton
         igxButton="icon"
         igxRipple
-        igxRightButtonStyle
         class="igx-tabs__header-button"
         (click)="scrollRight()"
     >