feat(module:TODO): simplify boolean attributes (#459)

src/components/alert/nz-alert.component.ts

@@ -5,6 +5,7 @@ import {
   Output,
   EventEmitter, OnChanges, OnInit
 } from '@angular/core';
+import { toBoolean } from '../util/convert';
 import { FadeAnimation } from '../core/animation/fade-animations';
 
 @Component({
@@ -52,18 +53,45 @@ import { FadeAnimation } from '../core/animation/fade-animations';
     './style/patch.less'
   ]
 })
-
 export class NzAlertComponent implements OnChanges {
+  private _banner = false;
+  private _closeable = false;
+  private _showIcon = false;
   _display = true;
   antAlert = 'ant-alert';
   @Input() nzType = 'info';
-  @Input() nzBanner = false;
-  @Input() nzCloseable = false;
   @Input() nzDescription: string;
-  @Input() nzShowIcon = false;
   @Input() nzCloseText: string;
   @Input() nzMessage: string;
   @Output() nzOnClose: EventEmitter<boolean> = new EventEmitter();
+
+  @Input()
+  set nzBanner(value: boolean) {
+    this._banner = toBoolean(value);
+  }
+
+  get nzBanner(): boolean {
+    return this._banner;
+  }
+
+  @Input()
+  set nzCloseable(value: boolean) {
+    this._closeable = toBoolean(value);
+  }
+
+  get nzCloseable(): boolean {
+    return this._closeable;
+  }
+
+  @Input()
+  set nzShowIcon(value: boolean) {
+    this._showIcon = toBoolean(value);
+  }
+
+  get nzShowIcon(): boolean {
+    return this._showIcon;
+  }
+
   _classMap = {
     [`${this.antAlert}`]                 : true,
     [`${this.antAlert}-${this.nzType}`]  : true,
@@ -86,8 +114,4 @@ export class NzAlertComponent implements OnChanges {
       [`${this.antAlert}-with-description`]: !!this.nzDescription
     };
   }
-
-  constructor() {
-  }
-
 }

src/components/avatar/nz-avatar.module.ts

@@ -7,6 +7,5 @@ import { NzAvatarComponent } from './nz-avatar.component';
   exports     : [ NzAvatarComponent ],
   imports     : [ CommonModule ]
 })
-
 export class NzAvatarModule {
 }

src/components/badge/nz-badge.component.ts

@@ -15,6 +15,8 @@ import {
   animate
 } from '@angular/animations';
 
+import { toBoolean } from '../util/convert';
+
 @Component({
   selector     : 'nz-badge',
   encapsulation: ViewEncapsulation.None,
@@ -60,7 +62,8 @@ import {
   ]
 })
 export class NzBadgeComponent implements OnInit {
-  _showZero = false;
+  private _showDot = false;
+  private _showZero = false;
   count: number;
   maxNumberArray;
   countArray = [];
@@ -76,19 +79,23 @@ export class NzBadgeComponent implements OnInit {
   @Input() nzOverflowCount = 99;
 
   @Input()
-  set nzShowZero(value: boolean | string) {
-    if (value === '') {
-      this._showZero = true;
-    } else {
-      this._showZero = value as boolean;
-    }
+  set nzShowZero(value: boolean) {
+    this._showZero = toBoolean(value);
   }
 
-  get nzShowZero() {
+  get nzShowZero(): boolean {
     return this._showZero;
   }
 
-  @Input() nzDot = false;
+  @Input()
+  set nzDot(value: boolean) {
+    this._showDot = toBoolean(value);
+  }
+
+  get nzDot(): boolean {
+    return this._showDot;
+  }
+
   @Input() nzText: string;
   @Input() nzStyle;
   @Input() @HostBinding('class.ant-badge-status') nzStatus: string;

src/components/breadcrumb/nz-breadcrumb.component.ts

@@ -18,8 +18,4 @@ import {
 export class NzBreadCrumbComponent {
   @Input() nzSeparator = '/';
   @HostBinding('class.ant-breadcrumb') _nzBreadcrumb = true;
-
-  constructor() {
-  }
-
 }

src/components/button/nz-button-group.component.ts

@@ -25,7 +25,7 @@ export class NzButtonGroupComponent implements AfterContentInit {
   @Input()
   get nzSize(): NzButtonGroupSize {
     return this._size;
-  };
+  }
 
   set nzSize(value: NzButtonGroupSize) {
     this._size = value;
@@ -35,10 +35,6 @@ export class NzButtonGroupComponent implements AfterContentInit {
     };
   }
 
-
-  constructor() {
-  }
-
   ngAfterContentInit() {
     /** trim text node between button */
     Array.from(this._groupWrapper.nativeElement.childNodes).forEach((node: HTMLElement) => {

src/components/button/nz-button.component.spec.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing';
-import { Component, DebugElement } from '@angular/core';
+import { async, fakeAsync, tick, ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing';
+import { Component, DebugElement, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { NzButtonModule } from './nz-button.module';
 import { NzButtonComponent } from './nz-button.component';
@@ -123,13 +123,12 @@ describe('NzButton', () => {
       expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
     });
 
-    it('should handle a click on the button', () => {
+    it('should handle a click on the button', fakeAsync(() => {
       buttonDebugElement.nativeElement.click();
       expect(testComponent.isLoading).toBe(true);
-      setTimeout(_ => {
-        expect(testComponent.isLoading).toBe(false);
-      }, 5000);
-    });
+      tick(5000);
+      expect(testComponent.isLoading).toBe(false);
+    }));
   });
 
   describe('NzButton with disabled', () => {
@@ -185,6 +184,35 @@ describe('NzButton', () => {
     });
   });
 
+  describe('NzButton with literal boolean attributes', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports     : [ NzButtonModule ],
+        declarations: [ TestAppLiteral ],
+        providers   : []
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TestAppLiteral);
+      testComponent = fixture.debugElement.componentInstance;
+    });
+
+    it('should treat empty attibutes as truthy', async(() => {
+      fixture.detectChanges();
+      const component = testComponent as TestAppLiteral;
+      expect(component.truthyButton.nzLoading).toBe(true);
+      expect(component.truthyButton.nzGhost).toBe(true);
+    }));
+
+    it('should treat non-exist attributes as falsy', async(() => {
+      fixture.detectChanges();
+      const component = testComponent as TestAppLiteral;
+      expect(component.falsyButton.nzLoading).toBe(false);
+      expect(component.falsyButton.nzGhost).toBe(false);
+    }));
+  });
+
 });
 
 /** Test component that contains an nzButton. */
@@ -261,4 +289,14 @@ class TestAppGroup {
   size = 'small';
 }
 
-
+@Component({
+  selector: 'test-app-literal',
+  template: `
+    <button #truthy nz-button nzLoading nzGhost>Truthy</button>
+    <button #falsy nz-button>Falsy</button>
+  `
+})
+class TestAppLiteral {
+  @ViewChild('truthy') truthyButton: NzButtonComponent
+  @ViewChild('falsy') falsyButton: NzButtonComponent
+}

src/components/button/nz-button.component.ts

@@ -7,6 +7,7 @@ import {
   AfterContentInit,
   Renderer2
 } from '@angular/core';
+import { toBoolean } from '../util/convert';
 
 export type NzButtonType = 'primary' | 'dashed' | 'danger';
 export type NzButtonShape = 'circle' | null ;
@@ -24,6 +25,8 @@ export type NzButtonSize = 'small' | 'large' | 'default' ;
   ]
 })
 export class NzButtonComponent implements AfterContentInit {
+  private _ghost = false;
+  private _loading = false;
   _el: HTMLElement;
   nativeElement: HTMLElement;
   _iconElement: HTMLElement;
@@ -32,15 +35,13 @@ export class NzButtonComponent implements AfterContentInit {
   _size: NzButtonSize;
   _classList: Array<string> = [];
   _iconOnly = false;
-  _loading = false;
   _clicked = false;
-  _ghost = false;
   _prefixCls = 'ant-btn';
   _sizeMap = { large: 'lg', small: 'sm' };
 
   @Input()
   set nzGhost(value: boolean) {
-    this._ghost = value;
+    this._ghost = toBoolean(value);
     this._setClassMap();
   }
 
@@ -51,7 +52,7 @@ export class NzButtonComponent implements AfterContentInit {
   @Input()
   get nzType(): NzButtonType {
     return this._type;
-  };
+  }
 
   set nzType(value: NzButtonType) {
     this._type = value;
@@ -61,7 +62,7 @@ export class NzButtonComponent implements AfterContentInit {
   @Input()
   get nzShape(): NzButtonShape {
     return this._shape;
-  };
+  }
 
   set nzShape(value: NzButtonShape) {
     this._shape = value;
@@ -76,18 +77,18 @@ export class NzButtonComponent implements AfterContentInit {
 
   get nzSize(): NzButtonSize {
     return this._size;
-  };
+  }
 
   @Input()
   set nzLoading(value: boolean) {
-    this._loading = value;
+    this._loading = toBoolean(value);
     this._setClassMap();
     this._setIconDisplay(value);
   }
 
   get nzLoading(): boolean {
     return this._loading;
-  };
+  }
 
   /** toggle button clicked animation */
   @HostListener('click')
@@ -98,7 +99,7 @@ export class NzButtonComponent implements AfterContentInit {
       this._clicked = false;
       this._setClassMap();
     }, 300);
-  };
+  }
 
 
   _setIconDisplay(value: boolean) {

src/components/button/nz-button.module.ts

@@ -8,6 +8,5 @@ import { CommonModule } from '@angular/common';
   exports     : [ NzButtonComponent, NzButtonGroupComponent ],
   imports     : [ CommonModule ]
 })
-
 export class NzButtonModule {
 }