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/language-service@2.4.1":
- version "2.4.1"
- resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-2.4.1.tgz#006f8907a28f0e13fa8fdf6f7d1ff23f3a649b01"
+"@angular/language-service@2.4.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"
 
-ng2-page-scroll@4.0.0-beta.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"
+ng2-page-scroll@4.0.0-beta.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"