fix(toast): proper handling of autohide toggling (#3283)

Toasts initially setup with `[autohide]="true"`were wrongly still
emitting `(hide)` output after toggling `autohide` to `false`.

A new demo has also been created to illustrate the `autohide` toggling
support, 'Prevent autohide on mouseover'.

Fixes #3280

demo/src/app/components/toast/demos/prevent-autohide/toast-prevent-autohide.html

@@ -0,0 +1,24 @@
+<p>
+  In this demo, you can show a toast by clicking the button below. It will hide itself after a 5 seconds delay unless you simply hover it with your mouse.
+</p>
+<button class="btn btn-primary" (click)="show = true">
+  Click me to show a toast
+</button>
+<hr *ngIf="show">
+<ngb-toast
+  *ngIf="show"
+  header="Autohide can be cancelled"
+  [delay]="5000"
+  [autohide]="autohide"
+  (mouseenter)="autohide = false"
+  (mouseleave)="autohide = true"
+  (hide)="show = false; autohide = true"
+  [class.bg-warning]="!autohide"
+>
+  <div *ngIf="autohide">
+    Try to mouse hover me.
+  </div>
+  <div *ngIf="!autohide">
+    I will remain visible until you leave again.
+  </div>
+</ngb-toast>

demo/src/app/components/toast/demos/prevent-autohide/toast-prevent-autohide.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+
+import {NgbdToastPreventAutohide} from './toast-prevent-autohide';
+
+@NgModule({
+  imports: [BrowserModule, NgbModule],
+  declarations: [NgbdToastPreventAutohide],
+  bootstrap: [NgbdToastPreventAutohide]
+})
+export class NgbdToastPreventAutohideModule {
+}

demo/src/app/components/toast/demos/prevent-autohide/toast-prevent-autohide.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({selector: 'ngbd-toast-prevent-autohide', templateUrl: './toast-prevent-autohide.html'})
+
+export class NgbdToastPreventAutohide {
+  show = false;
+  autohide = true;
+}

demo/src/app/components/toast/toast.module.ts

@@ -13,10 +13,10 @@ import {NgbdToastGlobal} from './demos/howto-global/toast-global.component';
 import {NgbdToastGlobalModule} from './demos/howto-global/toast-global.module';
 import {NgbdToastInline} from './demos/inline/toast-inline';
 import {NgbdToastInlineModule} from './demos/inline/toast-inline.module';
+import {NgbdToastPreventAutohide} from './demos/prevent-autohide/toast-prevent-autohide';
+import {NgbdToastPreventAutohideModule} from './demos/prevent-autohide/toast-prevent-autohide.module';
 import {NgbdToastOverviewComponent} from './overview/toast-overview.component';
 
-
-
 const OVERVIEW = {
   'inline-usage': 'Declarative usage',
   'toast-service': 'Building a toast management service'
@@ -48,6 +48,20 @@ const DEMOS = {
       {name: 'toast-closeable.ts', source: require('!!raw-loader!./demos/closeable/toast-closeable.ts')}
     ]
   },
+  'prevent-autohide': {
+    title: 'Prevent autohide on mouseover',
+    type: NgbdToastPreventAutohide,
+    files: [
+      {
+        name: 'toast-prevent-autohide.html',
+        source: require('!!raw-loader!./demos/prevent-autohide/toast-prevent-autohide.html')
+      },
+      {
+        name: 'toast-prevent-autohide.ts',
+        source: require('!!raw-loader!./demos/prevent-autohide/toast-prevent-autohide.ts')
+      }
+    ]
+  },
   global: {
     title: 'Toast management service',
     type: NgbdToastGlobal,
@@ -80,7 +94,7 @@ export const ROUTES = [
 @NgModule({
   imports: [
     NgbdSharedModule, NgbdComponentsSharedModule, NgbdToastInlineModule, NgbdToastCloseableModule,
-    NgbdToastCustomHeaderModule, NgbdToastGlobalModule
+    NgbdToastCustomHeaderModule, NgbdToastPreventAutohideModule, NgbdToastGlobalModule
   ],
   declarations: [NgbdToastOverviewComponent]
 })

src/toast/toast.spec.ts

@@ -4,7 +4,6 @@ import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'
 import {createGenericTestComponent} from '../test/common';
 import {NgbToastModule} from './toast.module';
 
-
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
@@ -92,12 +91,29 @@ describe('ngb-toast', () => {
          fixture.detectChanges();
          expect(fixture.componentInstance.hide).toHaveBeenCalledTimes(1);
        }));
+
+    it('should emit hide only one time regardless of autohide toggling', fakeAsync(() => {
+         const fixture =
+             createTestComponent(`<ngb-toast header="header" [autohide]="autohide" (hide)="hide()">body</ngb-toast>`);
+         tick(250);
+         fixture.componentInstance.autohide = false;
+         fixture.detectChanges();
+         tick(250);
+         fixture.detectChanges();
+         expect(fixture.componentInstance.hide).not.toHaveBeenCalled();
+         fixture.componentInstance.autohide = true;
+         fixture.detectChanges();
+         tick(500);
+         fixture.detectChanges();
+         expect(fixture.componentInstance.hide).toHaveBeenCalledTimes(1);
+       }));
   });
 });
 
 
 @Component({selector: 'test-cmp', template: ''})
 export class TestComponent {
   visible = true;
+  autohide = true;
   hide = jasmine.createSpy('hideSpy');
 }

src/toast/toast.ts

@@ -108,16 +108,12 @@ export class NgbToast implements AfterContentInit,
     this.autohide = config.autohide;
   }
 
-  ngAfterContentInit() {
-    if (this.autohide) {
-      this._timeoutID = setTimeout(() => this.hide(), this.delay);
-    }
-  }
+  ngAfterContentInit() { this._init(); }
 
   ngOnChanges(changes: SimpleChanges) {
     if ('autohide' in changes) {
       this._clearTimeout();
-      this.ngAfterContentInit();
+      this._init();
     }
   }
 
@@ -126,6 +122,12 @@ export class NgbToast implements AfterContentInit,
     this.hideOutput.emit();
   }
 
+  private _init() {
+    if (this.autohide && !this._timeoutID) {
+      this._timeoutID = setTimeout(() => this.hide(), this.delay);
+    }
+  }
+
   private _clearTimeout() {
     if (this._timeoutID) {
       clearTimeout(this._timeoutID);