fix(alert): removed duplicated event triggering

fixes #1430

package.json

@@ -98,7 +98,7 @@
     "lodash": "4.17.2",
     "markdown-loader": "github:valorkin/markdown-loader",
     "marked": "0.3.6",
-    "ng2-page-scroll": "4.0.0-beta.1",
+    "ng2-page-scroll": "4.0.0-beta.2",
     "ngm-cli": "^0.3.7",
     "npm-run-all": "3.1.2",
     "pre-commit": "1.2.1",

src/alert/alert.component.ts

@@ -1,67 +1,66 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AlertConfig } from './alert.config';
+import { OnChange } from '../utils/decorators';
 
-const ALERT_TEMPLATE = `
+@Component({
+  selector: 'alert,ngx-alert',
+  template: `
 <template [ngIf]="!isClosed">
-  <div class="alert" role="alert" [ngClass]="classes">
+  <div [class]="'alert alert-' + type" role="alert" [ngClass]="classes">
     <template [ngIf]="dismissible">
-      <button type="button" class="close" (click)="close()" (touch)="close()">
+      <button type="button" class="close" aria-label="Close" (click)="close()">
         <span aria-hidden="true">&times;</span>
         <span class="sr-only">Close</span>
       </button>
     </template>
     <ng-content></ng-content>
   </div>
 </template>
-  `;
-
-@Component({
-  selector: 'alert,ngx-alert',
-  template: ALERT_TEMPLATE
+  `
 })
 export class AlertComponent implements OnInit {
   /** Alert type. Provides one of four bootstrap supported contextual classes: `success`, `info`, `warning` and `danger` */
   @Input() public type: string = 'warning';
   /** If set, displays an inline "Close" button */
+  @OnChange()
   @Input() public dismissible: boolean = false;
   /** Number in milliseconds, after which alert will be closed */
   @Input() public dismissOnTimeout: number | string;
 
-  public isClosed: boolean = false;
-
   /** This event fires immediately after close instance method is called, $event is an instance of Alert component. */
-  @Output() public onClose: EventEmitter<AlertComponent> = new EventEmitter<AlertComponent>(false);
+  @Output() public onClose: EventEmitter<AlertComponent> = new EventEmitter<AlertComponent>();
   /** This event fires when alert closed, $event is an instance of Alert component */
-  @Output() public onClosed: EventEmitter<AlertComponent> = new EventEmitter<AlertComponent>(false);
+  @Output() public onClosed: EventEmitter<AlertComponent> = new EventEmitter<AlertComponent>();
 
-  protected classes: string[] = [];
+  public isClosed: boolean = false;
+  public classes: string = '';
+  public dismissibleChange: EventEmitter<string> = new EventEmitter();
 
   public constructor(_config: AlertConfig) {
     Object.assign(this, _config);
+    this.dismissibleChange.subscribe((dismissible: boolean) => {
+      this.classes = this.dismissible ? 'alert-dismissible' : '';
+    });
   }
 
   public ngOnInit(): void {
-    this.classes[0] = `alert-${this.type}`;
-    if (this.dismissible) {
-      this.classes[1] = 'alert-dismissible';
-    } else {
-      this.classes.length = 1;
-    }
-
     if (this.dismissOnTimeout) {
       // if dismissOnTimeout used as attr without binding, it will be a string
       setTimeout(() => this.close(),
         parseInt(this.dismissOnTimeout as string, 10));
     }
   }
 
-  // todo: mouse event + touch + pointer
   // todo: animation ` If the .fade and .in classes are present on the element,
   // the alert will fade out before it is removed`
   /**
    * Closes an alert by removing it from the DOM.
    */
   public close(): void {
+    if (this.isClosed) {
+      return;
+    }
+
     this.onClose.emit(this);
     this.isClosed = true;
     this.onClosed.emit(this);

src/spec/alert.component.spec.ts

@@ -28,14 +28,12 @@ describe('Component: Alert', () => {
   it('should have a default type alert-warning', () => {
     context.ngOnInit();
     expect(context.type).toEqual(`warning`);
-    expect(context.classes[0]).toEqual(`alert-warning`);
   });
 
   it('should have class dismissible if dismissible=true', () => {
     context.dismissible = true;
     context.ngOnInit();
-    expect(context.classes.length).toEqual(2);
-    expect(context.classes[1]).toEqual(`alert-dismissible`);
+    expect(context.classes).toEqual(`alert-dismissible`);
   });
 
   it('should be dismissed by timeout', (done:() => void) => {

src/utils/decorators.ts

@@ -6,8 +6,11 @@ export function OnChange(defaultValue?:any):any {
     Object.defineProperty(target, propertyKey, {
       get():any { return this[_key]; },
       set(value:any):void {
+        const prevValue = this[_key];
         this[_key] = value;
-        this[propertyKey + sufix].emit(value);
+        if (prevValue !== value && this[propertyKey + sufix]) {
+          this[propertyKey + sufix].emit(value);
+        }
       }
     });
   };

yarn.lock

@@ -15,63 +15,47 @@
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@angular-cli/base-href-webpack/-/base-href-webpack-1.0.10.tgz#fcdc0832dc93e68f0c331d0710f2377b76ed512e"
 
-"@angular/common@^2.4.1":
+"@angular/common@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@angular/common/-/common-2.4.1.tgz#a70167430574959c3423ac96ebdec98032d3500d"
 
-"@angular/compiler-cli@^2.2.0", "@angular/compiler-cli@^2.3.1":
+"@angular/compiler-cli@^2.2.0", "@angular/compiler-cli@^2.3.1", "@angular/compiler-cli@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-2.4.0.tgz#3262b941f4617f7c89955fb54cd68ff9ca0a9650"
   dependencies:
     "@angular/tsc-wrapped" "0.5.0"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
 
-"@angular/compiler-cli@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-2.4.1.tgz#9291504197a199fee2f48353d67431a1a9e40833"
-  dependencies:
-    "@angular/tsc-wrapped" "0.5.0"
-    minimist "^1.2.0"
-    reflect-metadata "^0.1.2"
-
-"@angular/compiler@^2.2.0", "@angular/compiler@^2.3.1":
+"@angular/compiler@^2.2.0", "@angular/compiler@^2.3.1", "@angular/compiler@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.0.tgz#275fa0a47ff2f1e4bae9ea053b94bbcdf8dee8ac"
 
-"@angular/compiler@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.1.tgz#62b4fbfc53c934bd5def78db594cbf245b3f446a"
-
-"@angular/core@^2.2.0", "@angular/core@^2.3.1":
+"@angular/core@^2.2.0", "@angular/core@^2.3.1", "@angular/core@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.0.tgz#7da68c85c6f2d76e5c391daefd3eedf545305bb5"
 
-"@angular/core@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.1.tgz#3a6d2dc7fd86fdebe4febae7eb28abad7d04c76a"
-
-"@angular/forms@^2.4.1":
+"@angular/forms@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-2.4.1.tgz#440ff9b864b3b79c55423c9ce5863030a25767ce"
 
-"@angular/http@^2.4.1":
+"@angular/http@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@angular/http/-/http-2.4.1.tgz#f06067e370c44d025ed00a03ef704f6c46ea59ac"
 
-"@angular/[email protected].1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-2.4.1.tgz#006f8907a28f0e13fa8fdf6f7d1ff23f3a649b01"
+"@angular/[email protected].0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-2.4.0.tgz#e727fbeab56137dcc1ef7c585637a7a4760d0906"
 
-"@angular/platform-browser-dynamic@^2.4.1":
+"@angular/platform-browser-dynamic@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.4.1.tgz#5fb72038f76c1e3646cea95f5b4722d67a4419dd"
 
-"@angular/platform-browser@^2.4.1":
+"@angular/platform-browser@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-2.4.1.tgz#4eaa829b450be34f0029796b6c3b99e27d3d5740"
 
-"@angular/router@^3.4.1":
+"@angular/router@^3.4.0":
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/@angular/router/-/router-3.4.1.tgz#079c8580943547a710f292026ac86a08d336a49d"
 
@@ -4998,9 +4982,9 @@ nested-error-stacks@^2.0.0:
   dependencies:
     inherits "~2.0.1"
 
-[email protected].1:
-  version "4.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/ng2-page-scroll/-/ng2-page-scroll-4.0.0-beta.1.tgz#422848d6579e0db8b88173b5a03e17f3491c09a7"
+[email protected].2:
+  version "4.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/ng2-page-scroll/-/ng2-page-scroll-4.0.0-beta.2.tgz#eac125929f1717303950657c7a460a9ecef0b03b"
 
 ngm-cli@^0.3.7:
   version "0.3.7"