refactor(snackbar): should implement IToggleView

CHANGELOG.md

@@ -44,7 +44,12 @@ All notable changes for each version of this project will be documented in this
         - `pagerHidden `
         - `dropdownEnabled`
         - `dropdownHidden`
-
+- `IgxSnackbarComponent`
+    - Deprecated property `message` is now removed;
+    - **Breaking Change** - the `snackbarAnimationStarted` and `snackbarAnimationDone` methods are now removed. The `animationStarted` and `animationDone` events now provide reference to the `ToggleViewEventArgs` interface as an argument and are emitted by the `onOpened` and `onClosed` events of the `IgxToggleDirective`. 
+- `IgxToastComponent`
+    - Deprecated property `message` is now removed;
+    - **Breaking Change** - The `isVisibleChange` event now provides reference to the `ToggleViewEventArgs` interface as an argument.
 
 - **Breaking Change** - `IgxOverlayService` events are renamed as follows:
     - `onOpening` -> `opening`
@@ -3222,7 +3227,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
                 [igxForContainerSize]='"500px"'
                 [igxForItemSize]='"50px"'
                 let-rowIndex="index">
-                <div style='height:50px;'>{{rowIndex}} : {{item.text}}</div>
+                <div style='height: 50px;'>{{rowIndex}} : {{item.text}}</div>
         </ng-template>
     </div>
     ```

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

@@ -212,7 +212,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * ```
      * ```html
      * <igx-buttongroup #MyChild [multiSelection]="!multi" (selected)="selectedHandler($event)"></igx-buttongroup>
-     * <igx-toast #toast message="You have made a selection!"></igx-toast>
+     * <igx-toast #toast>You have made a selection!</igx-toast>
      * ```
      */
     @Output()
@@ -230,7 +230,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * ```
      * ```html
      * <igx-buttongroup> #MyChild [multiSelection]="multi" (deselected)="deselectedHandler($event)"></igx-buttongroup>
-     * <igx-toast #toast message="You have deselected a button!"></igx-toast>
+     * <igx-toast #toast>You have deselected a button!</igx-toast>
      * ```
      */
     @Output()

projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss

@@ -87,6 +87,7 @@
 /// @requires --var
 @mixin igx-snackbar($theme) {
     @include igx-css-vars($theme);
+    @include fade-in();
 
     // @debug $theme;
 
@@ -114,6 +115,10 @@
         backdrop-filter: blur(8px);
     }
 
+    %igx-snackbar-message {
+        @include animation('fade-in' .35s ease-out);
+    }
+
     %igx-snackbar-button {
         background: transparent;
         color: --var($theme, 'button-color');
@@ -129,6 +134,7 @@
         font-size: inherit;
         font-family: inherit;
         cursor: pointer;
+        @include animation('fade-in' .35s ease-out);
 
         &:hover {
             color: --var($theme, 'button-color');

projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts

@@ -0,0 +1,118 @@
+import { Directive, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { IToggleView } from '../../core/navigation';
+import { IPositionStrategy, OverlaySettings } from '../../services/public_api';
+import { IgxOverlayOutletDirective, IgxToggleDirective } from '../toggle/toggle.directive';
+
+@Directive()
+export abstract class IgxNotificationsDirective extends IgxToggleDirective
+    implements IToggleView, OnDestroy {
+    /**
+     * Sets/gets the `aria-live` attribute.
+     * If not set, `aria-live` will have value `"polite"`.
+     */
+    @HostBinding('attr.aria-live')
+    @Input()
+    public ariaLive = 'polite';
+
+    /**
+     * Sets/gets whether the element will be hidden after the `displayTime` is over.
+     * Default value is `true`.
+     */
+    @Input()
+    public autoHide = true;
+
+    /**
+     * Sets/gets the duration of time span (in milliseconds) which the element will be visible
+     * after it is being shown.
+     * Default value is `4000`.
+     */
+    @Input()
+    public displayTime = 4000;
+
+    /**
+     * Gets/Sets the container used for the element.
+     *
+     * @remarks
+     *  `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
+     */
+    @Input()
+    public outlet: IgxOverlayOutletDirective | ElementRef;
+
+    /**
+     * Enables/Disables the visibility of the element.
+     * If not set, the `isVisible` attribute will have value `false`.
+     */
+    @Input()
+    public get isVisible() {
+        return !this.collapsed;
+    }
+
+    public set isVisible(value) {
+        if (value !== this.isVisible) {
+            if (value) {
+                requestAnimationFrame(() => {
+                    this.open();
+                });
+            } else {
+                this.close();
+            }
+        }
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public textMessage: string | OverlaySettings = '';
+
+    /**
+     * @hidden
+     */
+    public timeoutId: number;
+    public d$ = new Subject<boolean>();
+
+    /**
+     * @hidden
+     */
+    protected strategy: IPositionStrategy;
+
+    /**
+     * @hidden
+     */
+    public open() {
+        clearInterval(this.timeoutId);
+
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: this.strategy,
+            closeOnEscape: false,
+            closeOnOutsideClick: false,
+            modal: false,
+            outlet: this.outlet
+        };
+
+        super.open(overlaySettings);
+
+        if (this.autoHide) {
+            this.timeoutId = window.setTimeout(() => {
+                this.close();
+            }, this.displayTime);
+        }
+    }
+
+    /**
+     * Hides the element.
+     */
+    public close() {
+        clearTimeout(this.timeoutId);
+        super.close();
+    }
+
+    /**
+     * @hidden
+     */
+    public ngOnDestroy() {
+        this.d$.next(true);
+        this.d$.complete();
+    }
+}

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

@@ -338,6 +338,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event };
         delete this._overlayId;
         this.onClosed.emit(closedEventArgs);
+        this.cdr.markForCheck();
     };
 
     private subscribe() {

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

@@ -209,8 +209,10 @@
     </div>
 
     <div class="igx-grid__addrow-snackbar">
-        <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
+        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
     </div>
+
+    <div #igxBodyOverlayOutlet igxOverlayOutlet></div>
 </div>
 
 

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -176,8 +176,10 @@
         <div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
     </div>
     <div class="igx-grid__addrow-snackbar">
-        <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
+        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
     </div>
+
+    <div igxOverlayOutlet #igxBodyOverlayOutlet></div>
 </div>
 
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -146,8 +146,10 @@
         <div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
     </div>
     <div class="igx-grid__addrow-snackbar">
-        <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
+        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
     </div>
+
+    <div igxOverlayOutlet #igxBodyOverlayOutlet></div>
 </div>
 
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>

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

@@ -1,10 +1,7 @@
-<div class="igx-snackbar" *ngIf="isVisible" (@slideInOut.start)="snackbarAnimationStarted($event)" (@slideInOut.done)="snackbarAnimationDone($event)"
-    [@slideInOut]="isVisible">
-    <div class="igx-snackbar__message" [@fadeInOut]="isVisible">
-        {{ snackbarMessage }}
-        <ng-content></ng-content>
-    </div>
-    <button class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" [@fadeInOut] (click)="triggerAction()">
-        {{ actionText }}
-    </button>
+<div class="igx-snackbar__message">
+    {{ textMessage }}
+    <ng-content></ng-content>
 </div>
+<button class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" (click)="triggerAction()">
+    {{ actionText }}
+</button>