Merge branch 'master' into mkirkova/fix-9116-master

Author: kdinev

CHANGELOG.md

@@ -147,6 +147,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/avatar/_avatar-theme.scss

@@ -127,7 +127,7 @@
     }
 
     %igx-avatar--rounded {
-        --border-radius: 44px;
+        --igx-avatar-border-radius: 44px;
         border-radius: --var(('border-radius': 44px), 'border-radius');
     }
 

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -925,7 +925,11 @@
     }
 
     %cal-value--inactive--single--hover {
-        color: --var($theme, 'inactive-text-color');
+        @if $bootstrap-theme {
+            color: --var($theme, 'date-selected-text-color');
+        } @else {
+            color: --var($theme, 'inactive-text-color');
+        }
     }
 
     %cal-value--special {
@@ -1024,35 +1028,25 @@
     }
 
     %cal-value--range%cal-value--inactive%cal-value--selected {
-        background: transparent !important;
-
         %cal-value-content {
-            color: --var($theme, 'date-disabled-text-color');
-            background: transparent !important;
+            color: --var($theme, 'date-selected-text-color');
+        }
+
+        &:focus,
+        &:hover {
+            %cal-value-content {
+                color: --var($theme, 'date-selected-text-color');
+            }
         }
     }
 
     %cal-value--range%cal-value--inactive%cal-value--selected%cal-value--single {
-        background: transparent !important;
-
         %cal-value-content {
             color: --var($theme, 'date-selected-text-color');
             background: --var($theme, 'date-selected-background') !important;
         }
     }
 
-    %cal-value--inactive%cal-value--selected%cal-value--first {
-        &::after {
-            background: transparent !important;
-        }
-    }
-
-    %cal-value--inactive%cal-value--selected%cal-value--last {
-        &::before {
-            background: transparent !important;
-        }
-    }
-
     %cal-value--first {
         position: relative;
         background: transparent;

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/date-range-picker/date-range-picker.component.spec.ts

@@ -508,29 +508,17 @@ describe('IgxDateRangePicker', () => {
                     spyOn(dateRange.closing, 'emit').and.callThrough();
                     spyOn(dateRange.closed, 'emit').and.callThrough();
 
-                    const dayRange = 8;
-                    const today = new Date();
-                    startDate = new Date(today.getFullYear(), today.getMonth(), 10, 0, 0, 0);
-                    endDate = new Date(startDate);
-                    endDate.setDate(endDate.getDate() + dayRange);
-                    const startDateDayElIndex = startDate.getDate() + 3;
-                    const endDateDayElIndex = startDateDayElIndex + dayRange;
                     dateRange.open();
                     tick();
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeFalsy();
-                    calendarDays = document.getElementsByClassName('igx-calendar__date');
-                    UIInteractions.simulateClickAndSelectEvent(calendarDays[startDateDayElIndex]);
-                    UIInteractions.simulateClickAndSelectEvent(calendarDays[endDateDayElIndex]);
-                    fixture.detectChanges();
 
                     const doneBtn = document.getElementsByClassName(CSS_CLASS_DONE_BUTTON)[0];
                     UIInteractions.simulateClickAndSelectEvent(doneBtn);
                     tick();
                     fixture.detectChanges();
 
-                    verifyDateRangeInSingleInput();
-                    expect(dateRange.collapsed).toBeTruthy();
+                    expect(dateRange.collapsed).toBeTrue();
                     expect(dateRange.closing.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.closing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.closed.emit).toHaveBeenCalledTimes(1);

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>
 ```