refactor(toast): inherit methods from toggle directive

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-component.scss

@@ -8,10 +8,5 @@
 @include b(igx-toast) {
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
-
     @extend %igx-toast-display !optional;
-
-    @include m(active) {
-        @extend %igx-toast--active !optional;
-    }
 }

projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss

@@ -102,7 +102,6 @@
     ), $variant);
 
     %igx-toast-display {
-        position: absolute;
         display: inline-flex;
         justify-content: center;
         align-items: center;
@@ -115,17 +114,6 @@
         border-radius: --var($theme, 'border-radius');
         box-shadow: map-get($theme, 'shadow');
         backdrop-filter: blur(10px);
-        z-index: 999999;
-        left: -999999px;
-        top: -999999px;
-        opacity: 0;
-    }
-
-    %igx-toast--active {
-        position: relative;
-        left: initial;
-        top: initial;
-        opacity: 1;
     }
 }
 

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

@@ -1,19 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 import {
+    ChangeDetectorRef,
     Component,
     ElementRef,
     EventEmitter,
     HostBinding,
     Inject,
     Input,
     NgModule,
-    OnDestroy,
-    OnInit,
     Optional,
     Output,
 } from '@angular/core';
 import { IgxNavigationService, IToggleView } from '../core/navigation';
+import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import {
     OverlaySettings,
@@ -60,7 +60,8 @@ export type IgxToastPosition = keyof typeof IgxToastPositionEnum;
     selector: 'igx-toast',
     templateUrl: 'toast.component.html',
 })
-export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
+export class IgxToastComponent extends IgxToggleDirective
+    implements IToggleView {
     private _isVisible = false;
 
     /**
@@ -201,7 +202,6 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
      * ```
      * @memberof IgxToastComponent
      */
-    @HostBinding('class.igx-toast--active')
     @Input()
     public get isVisible() {
         return this._isVisible;
@@ -262,7 +262,7 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
      * @memberof IgxToastComponent
      */
     public get element() {
-        return this.elementRef.nativeElement;
+        return this._element.nativeElement;
     }
 
     /**
@@ -276,16 +276,14 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
      */
     private timeoutId: number;
 
-    /**
-     * @hidden
-     */
-    private overlayId: string;
-
     constructor(
-        private elementRef: ElementRef,
-        @Optional() private navService: IgxNavigationService,
-        @Inject(IgxOverlayService) private overlayService: IgxOverlayService
-    ) {}
+        private _element: ElementRef,
+        cdr: ChangeDetectorRef,
+        @Optional() navService: IgxNavigationService,
+        @Inject(IgxOverlayService) overlayService: IgxOverlayService
+    ) {
+        super(_element, cdr, overlayService, navService);
+    }
 
     /**
      * Shows the toast.
@@ -311,29 +309,29 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
             closeOnEscape: false,
             closeOnOutsideClick: false,
             modal: false,
-            outlet: this.outlet
+            outlet: this.outlet,
         };
 
         if (message !== undefined) {
             this.toastMessage = message;
         }
 
-        this.overlayId = this.overlayService.attach(
-            this.elementRef,
-            overlaySettings
-        );
-
-        this.onShowing.emit(this);
-        this._isVisible = true;
+        this.onOpening.subscribe(() => {
+            this.isVisible = true;
+            this.onShowing.emit(this);
+        });
 
         if (this.autoHide) {
             this.timeoutId = window.setTimeout(() => {
                 this.hide();
             }, this.displayTime);
         }
 
-        this.overlayService.show(this.overlayId);
-        this.onShown.emit(this);
+        super.open(overlaySettings);
+
+        this.onOpened.subscribe(() => {
+            this.onShown.emit(this);
+        });
     }
 
     /**
@@ -344,11 +342,18 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
      * @memberof IgxToastComponent
      */
     public hide(): void {
-        this.onHiding.emit(this);
-        this._isVisible = false;
-        this.onHidden.emit(this);
-        this.overlayService.hide(this.overlayId);
         clearInterval(this.timeoutId);
+
+        this.onClosing.subscribe(() => {
+            this.isVisible = false;
+            this.onHiding.emit(this);
+        });
+
+        super.close();
+
+        this.onClosed.subscribe(() => {
+            this.onHidden.emit(this);
+        });
     }
 
     /**
@@ -375,25 +380,7 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
      * @memberof IgxToastComponent
      */
     public toggle() {
-        this._isVisible ? this.close() : this.open();
-    }
-
-    /**
-     * @hidden
-     */
-    public ngOnInit() {
-        if (this.navService && this.id) {
-            this.navService.add(this.id, this);
-        }
-    }
-
-    /**
-     * @hidden
-     */
-    public ngOnDestroy() {
-        if (this.navService && this.id) {
-            this.navService.remove(this.id);
-        }
+        super.toggle();
     }
 }
 

src/app/toast/toast.sample.html

@@ -64,6 +64,19 @@ <h4 class="sample-title">Top Position</h4>
             </button>
         </div>
     </article>
+
+    <article class="column">
+        <h4 class="sample-title">Toggle Toast</h4>
+        <div class="btn-group">
+            <button
+                igxButton="raised"
+                igxRipple="white"
+                (click)="toast.toggle()"
+            >
+                Toggle Toast
+            </button>
+        </div>
+    </article>
 </div>
 
 <div igxOverlayOutlet #outlet="overlay-outlet"></div>