Merge branch 'master' into rkaraivanov/fix-9479

Author: ddincheva

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/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/toast/toast.component.spec.ts

@@ -7,7 +7,7 @@ import {
     ComponentFixture,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
     IgxToastComponent,
     IgxToastModule,
@@ -19,7 +19,7 @@ describe('IgxToast', () => {
     beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ToastInitializeTestComponent],
-            imports: [BrowserAnimationsModule, IgxToastModule],
+            imports: [NoopAnimationsModule, IgxToastModule]
         }).compileComponents();
     }));
 
@@ -73,18 +73,27 @@ describe('IgxToast', () => {
         expect(toast.onOpening.emit).toHaveBeenCalled();
     });
 
-    it('should emit onHiding when toast is hidden', () => {
-        spyOn(toast.hiding, 'emit');
+    it('should emit onClosing when toast is hidden', () => {
+        spyOn(toast.onClosing, 'emit');
+        toast.open();
         toast.close();
-        expect(toast.hiding.emit).toHaveBeenCalled();
+        expect(toast.onClosing.emit).toHaveBeenCalled();
     });
 
-    it('should emit onOpened when toast is opened', () => {
-        expect(toast.isVisible).toBeFalse();
+    it('should emit onOpened when toast is opened', fakeAsync(() => {
+        spyOn(toast.onOpened, 'emit');
         toast.open();
-        fixture.detectChanges();
-        expect(toast.isVisible).toBeTrue();
-    });
+        tick(4000);
+        expect(toast.onOpened.emit).toHaveBeenCalled();
+    }));
+
+    it('should emit onClosed when toast is closed', fakeAsync(() => {
+        spyOn(toast.onClosed, 'emit');
+        toast.open();
+        toast.close();
+        tick(4000);
+        expect(toast.onClosed.emit).toHaveBeenCalled();
+    }));
 
     it('visibility is updated by the toggle() method', () => {
         expect(toast.isVisible).toBeFalse();

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

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { DeprecateMethod, DeprecateProperty } from '../core/deprecateDecorators';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 import {
     ChangeDetectorRef,
     Component,
@@ -87,58 +87,6 @@ export class IgxToastComponent extends IgxToggleDirective
     @Input()
     public id = `igx-toast-${NEXT_ID++}`;
 
-    /**
-     * Emits an event prior the toast is shown.
-     * Provides reference to the `IgxToastComponent` as event argument.
-     * ```html
-     * <igx-toast (showing)="handleShowing($event)"></igx-toast>
-     * ```
-     *
-     * @memberof IgxToastComponent
-     */
-    @DeprecateProperty(`'showing' property is deprecated. You can use 'onOpening' instead.`)
-    @Output()
-    public showing = new EventEmitter<IgxToastComponent>();
-
-    /**
-     * Emits an event when the toast is shown.
-     * Provides reference to the `IgxToastComponent` as event argument.
-     * ```html
-     * <igx-toast (shown)="handleShown($event)"></igx-toast>
-     * ```
-     *
-     * @memberof IgxToastComponent
-     */
-    @DeprecateProperty(`'shown' property is deprecated. You can use 'onOpened' instead.`)
-    @Output()
-    public shown = new EventEmitter<IgxToastComponent>();
-
-    /**
-     * Emits an event prior the toast is hidden.
-     * Provides reference to the `IgxToastComponent` as event argument.
-     * ```html
-     * <igx-toast (hiding)="handleHiding($event)"></igx-toast>
-     * ```
-     *
-     * @memberof IgxToastComponent
-     */
-    @DeprecateProperty(`'hiding' property is deprecated. You can use 'onClosing' instead.`)
-    @Output()
-    public hiding = new EventEmitter<IgxToastComponent>();
-
-    /**
-     *  Emits an event when the toast is hidden.
-     *  Provides reference to the `IgxToastComponent` as event argument.
-     * ```html
-     * <igx-toast (hidden)="handleHidden($event)"></igx-toast>
-     * ```
-     *
-     * @memberof IgxToastComponent
-     */
-    @DeprecateProperty(`'hidden' property is deprecated. You can use 'onClosed' instead.`)
-    @Output()
-    public hidden = new EventEmitter<IgxToastComponent>();
-
     /**
      * Sets/gets the `role` attribute.
      * If not set, `role` will have value `"alert"`.
@@ -328,37 +276,6 @@ export class IgxToastComponent extends IgxToggleDirective
         super(_element, cdr, overlayService, navService);
     }
 
-    /**
-     * @deprecated
-     * Shows the toast.
-     * If `autoHide` is enabled, the toast will hide after `displayTime` is over.
-     *
-     * ```typescript
-     * this.toast.show();
-     * ```
-     *
-     * @memberof IgxToastComponent
-     */
-    @DeprecateMethod(`'show' is deprecated. Use 'open' method instead.`)
-    public show(message?: string): void {
-        this.open(message);
-    }
-
-    /**
-     * @deprecated
-     * Hides the toast.
-     *
-     * ```typescript
-     * this.toast.hide();
-     * ```
-     *
-     * @memberof IgxToastComponent
-     */
-    @DeprecateMethod(`'hide' is deprecated. Use 'close' method instead.`)
-    public hide(): void {
-        this.close();
-    }
-
     /**
      * Shows the toast.
      * If `autoHide` is enabled, the toast will hide after `displayTime` is over.
@@ -390,7 +307,6 @@ export class IgxToastComponent extends IgxToggleDirective
             this.toastMessage = message;
         }
 
-        this.showing.emit(this);
         super.open(overlaySettings);
 
         if (this.autoHide) {
@@ -409,7 +325,6 @@ export class IgxToastComponent extends IgxToggleDirective
      */
     public close() {
         clearInterval(this.timeoutId);
-        this.hiding.emit(this);
         super.close();
     }
 
@@ -431,12 +346,10 @@ export class IgxToastComponent extends IgxToggleDirective
     public ngOnInit() {
         this.onOpened.pipe(takeUntil(this.d$)).subscribe(() => {
             this.isVisibleChange.emit(true);
-            this.shown.emit(this);
         });
 
         this.onClosed.pipe(takeUntil(this.d$)).subscribe(() => {
             this.isVisibleChange.emit(false);
-            this.hidden.emit(this);
         });
     }
 

src/app/toast/toast.sample.html

@@ -84,10 +84,10 @@ <h4 class="sample-title">Toggle Toast</h4>
 <igx-toast
     #toast
     [outlet]="outlet"
-    (onShowing)="handleShowing($event)"
-    (onShown)="handleShown($event)"
-    (onHiding)="handleHiding($event)"
-    (onHidden)="handleHidden($event)"
+    (onOpening)="handleShowing($event)"
+    (onOpened)="handleShown($event)"
+    (onClosing)="handleHiding($event)"
+    (onClosed)="handleHidden($event)"
 >
     This message will self-destruct in 4 seconds.
 </igx-toast>