refactor(module:all): remove property for static host className (#664)

NG-ZORRO · Dec 6, 2017 · cc1a3f4 · cc1a3f4
1 parent 8ba3ea8
commit cc1a3f4
Show file tree

Hide file tree

Showing 37 changed files with 160 additions and 112 deletions.
diff --git a/src/components/anchor/nz-anchor-link.component.ts b/src/components/anchor/nz-anchor-link.component.ts
@@ -20,7 +20,10 @@ import { NzAnchorComponent } from './nz-anchor.component';
       <ng-template *ngIf="nzTemplate" [ngTemplateOutlet]="nzTemplate"></ng-template>
     </a>
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-anchor-link]': 'true'
+  }
 })
 export class NzAnchorLinkComponent {
 
@@ -30,8 +33,6 @@ export class NzAnchorLinkComponent {
 
   @ContentChild('nzTemplate') nzTemplate: TemplateRef<any>;
 
-  @HostBinding('class.ant-anchor-link') _nzAnchorLink = true;
-
   @HostBinding('class.ant-anchor-link-active') active: boolean = false;
 
   @HostListener('click')

diff --git a/src/components/badge/nz-badge.component.ts b/src/components/badge/nz-badge.component.ts
@@ -59,7 +59,10 @@ import { toBoolean } from '../util/convert';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-badge]': 'true'
+  }
 })
 export class NzBadgeComponent implements OnInit {
   private _showDot = false;
@@ -69,7 +72,6 @@ export class NzBadgeComponent implements OnInit {
   countArray = [];
   countSingleArray = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
   @ContentChild('content') content: TemplateRef<any>;
-  @HostBinding('class.ant-badge') _nzBadge = true;
 
   @HostBinding('class.ant-badge-not-a-wrapper')
   get setNoWrapper() {

diff --git a/src/components/breadcrumb/nz-breadcrumb.component.ts b/src/components/breadcrumb/nz-breadcrumb.component.ts
@@ -13,9 +13,11 @@ import {
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-breadcrumb]': 'true'
+  }
 })
 export class NzBreadCrumbComponent {
   @Input() nzSeparator = '/';
-  @HostBinding('class.ant-breadcrumb') _nzBreadcrumb = true;
 }
diff --git a/src/components/card/nz-card-grid.directive.ts b/src/components/card/nz-card-grid.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-card-grid]'
+  selector: '[nz-card-grid]',
+  host: {
+    '[class.ant-card-grid]': 'true'
+  }
 })
-export class NzCardGridDirective {
-  @HostBinding('class.ant-card-grid') _nzCardGrid = true;
-}
+export class NzCardGridDirective { }
diff --git a/src/components/card/nz-card.component.ts b/src/components/card/nz-card.component.ts
@@ -49,7 +49,10 @@ import { toBoolean } from '../util/convert';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-card]': 'true'
+  }
 })
 export class NzCardComponent {
   private _borderd = true;
@@ -69,7 +72,6 @@ export class NzCardComponent {
   @ContentChild('title') title: TemplateRef<any>;
   @ContentChild('extra') extra: TemplateRef<any>;
   @ContentChild('body') body: TemplateRef<any>;
-  @HostBinding('class.ant-card') _nzCard = true;
 
   @Input()
   set nzLoading(value: boolean) {

diff --git a/src/components/carousel/nz-carousel-content.directive.ts b/src/components/carousel/nz-carousel-content.directive.ts
@@ -6,6 +6,9 @@ import {
 
 @Directive({
   selector: '[nz-carousel-content]',
+  host: {
+    '[class.slick-slide]': 'true'
+  }
 })
 export class NzCarouselContentDirective {
   width = 0;
@@ -15,8 +18,6 @@ export class NzCarouselContentDirective {
   fadeMode = false
   nativeElement: HTMLElement;
 
-  @HostBinding('class.slick-slide') _nzSlickSlide = true;
-
   @HostBinding('class.slick-active')
   get setActiveClass() {
     return this.isActive === true;

diff --git a/src/components/carousel/nz-carousel.component.ts b/src/components/carousel/nz-carousel.component.ts
@@ -32,7 +32,10 @@ import { toBoolean } from '../util/convert';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-carousel]': 'true'
+  }
 })
 export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   private _autoPlay = false;
@@ -52,7 +55,6 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   @ViewChild('slickList') slickList: ElementRef;
   @ViewChild('slickTrack') slickTrack: ElementRef;
   @Input() nzEffect = 'scrollx';
-  @HostBinding('class.ant-carousel') _nzCarousel = true;
 
   @Input()
   set nzDots(value: boolean) {

diff --git a/src/components/collapse/nz-collapse.component.ts b/src/components/collapse/nz-collapse.component.ts
@@ -45,7 +45,10 @@ import { toBoolean } from '../util/convert';
       transition('inactive => active', animate('150ms ease-in')),
       transition('active => inactive', animate('150ms ease-out'))
     ])
-  ]
+  ],
+  host: {
+    '[class.ant-collapse-item]': 'true'
+  }
 })
 
 export class NzCollapseComponent {
@@ -54,8 +57,6 @@ export class NzCollapseComponent {
 
   _el;
 
-  @HostBinding('class.ant-collapse-item') _nzCollapseItem = true;
-
   @Input() nzTitle: string;
 
   @Input()

diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts
@@ -181,7 +181,10 @@ import { NzLocaleService } from '../locale/index';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-calendar-picker]': 'true'
+  }
 })
 export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   private _allowClear = true;
@@ -212,7 +215,6 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   @Input() nzMode: 'day' | 'month' = 'day';
   @ViewChild('trigger') trigger;
   @ViewChild(NzTimePickerInnerComponent) timePickerInner: NzTimePickerInnerComponent;
-  @HostBinding('class.ant-calendar-picker') _nzCalendarPicker = true;
 
   @Input()
   set nzAllowClear(value: boolean) {

diff --git a/src/components/dropdown/nz-dropdown.directive.ts b/src/components/dropdown/nz-dropdown.directive.ts
@@ -2,9 +2,11 @@ import { Directive, ElementRef, HostBinding } from '@angular/core';
 
 @Directive({
   selector: '[nz-dropdown]',
+  host: {
+    '[class.ant-dropdown-trigger]': 'true'
+  }
 })
 export class NzDropDownDirective {
-  @HostBinding('class.ant-dropdown-trigger') _dropDownTrigger = true;
   constructor(public elementRef: ElementRef) {
   }
 }
diff --git a/src/components/form/nz-form-control.component.ts b/src/components/form/nz-form-control.component.ts
@@ -13,11 +13,13 @@ import { toBoolean } from '../util/convert';
       <ng-content></ng-content>
     </div>
   `,
-  styles  : []
+  styles  : [],
+  host: {
+    '[class.ant-form-item-control-wrapper]': 'true'
+  }
 })
 export class NzFormControlComponent {
   private _hasFeedback = false;
-  @HostBinding(`class.ant-form-item-control-wrapper`) _nzFormItemControlWrapper = true;
 
   @Input()
   set nzHasFeedback(value: boolean) {

diff --git a/src/components/form/nz-form-explain.directive.ts b/src/components/form/nz-form-explain.directive.ts
@@ -7,11 +7,12 @@ import { NzFormItemDirective } from './nz-form-item.directive';
   template     : `
     <ng-content></ng-content>
   `,
-  styles       : []
+  styles       : [],
+  host: {
+    '[class.ant-form-explain]': 'true'
+  }
 })
 export class NzFormExplainComponent implements OnDestroy, OnInit {
-  @HostBinding(`class.ant-form-explain`) _nzFormExplain = true;
-
   constructor(private _nzFormItem: NzFormItemDirective) {
   }
 

diff --git a/src/components/form/nz-form-extra.directive.ts b/src/components/form/nz-form-extra.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-extra]'
+  selector: '[nz-form-extra]',
+  host: {
+    '[class.ant-form-extra]': 'true'
+  }
 })
-export class NzFormExtraDirective {
-  @HostBinding(`class.ant-form-extra`) _nzFormExtra = true;
-}
+export class NzFormExtraDirective { }
diff --git a/src/components/form/nz-form-item.directive.ts b/src/components/form/nz-form-item.directive.ts
@@ -1,13 +1,14 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-item]'
+  selector: '[nz-form-item]',
+  host: {
+    '[class.ant-form-item]': 'true'
+  }
 })
 export class NzFormItemDirective {
   _withHelp = 0;
 
-  @HostBinding(`class.ant-form-item`) _nzFormItem = true;
-
   enableHelp() {
     this._withHelp++;
   }

diff --git a/src/components/form/nz-form-label.directive.ts b/src/components/form/nz-form-label.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-label]'
+  selector: '[nz-form-label]',
+  host: {
+    '[class.ant-form-item-label]': 'true'
+  }
 })
-export class NzFormLabelDirective {
-  @HostBinding(`class.ant-form-item-label`) _nzFormItemLabel = true;
-}
+export class NzFormLabelDirective { }
diff --git a/src/components/form/nz-form-split.directive.ts b/src/components/form/nz-form-split.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-split]'
+  selector: '[nz-form-split]',
+  host: {
+    '[class.ant-form-split]': 'true'
+  }
 })
-export class NzFormSplitDirective {
-  @HostBinding(`class.ant-form-split`) _nzFormSplit = true;
-}
+export class NzFormSplitDirective { }
diff --git a/src/components/form/nz-form-text.directive.ts b/src/components/form/nz-form-text.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-text]'
+  selector: '[nz-form-text]',
+  host: {
+    '[class.ant-form-text]': 'true'
+  }
 })
-export class NzFormTextDirective {
-  @HostBinding(`class.ant-form-text`) _nzFormText = true;
-}
+export class NzFormTextDirective { }
diff --git a/src/components/input/nz-input.directive.component.ts b/src/components/input/nz-input.directive.component.ts
@@ -15,7 +15,10 @@ import { toBoolean } from '../util/convert';
   template     : ``,
   styleUrls    : [
     './style/index.less'
-  ]
+  ],
+  host: {
+    '[class.ant-input]': 'true'
+  }
 })
 export class NzInputDirectiveComponent {
   private _disabled = false;
@@ -84,9 +87,6 @@ export class NzInputDirectiveComponent {
     return this._autosize;
   }
 
-  @HostBinding(`class.ant-input`) _nzInput = true;
-
-
   @HostBinding(`class.ant-input-lg`)
   get setLgClass(): boolean {
     return this.size === 'lg';

diff --git a/src/components/layout/nz-content.component.ts b/src/components/layout/nz-content.component.ts
@@ -5,8 +5,9 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template     : `
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-layout-content]': 'true'
+  }
 })
-export class NzContentComponent {
-  @HostBinding('class.ant-layout-content') _nzLayoutContent = true;
-}
+export class NzContentComponent { }
diff --git a/src/components/layout/nz-footer.component.ts b/src/components/layout/nz-footer.component.ts
@@ -5,8 +5,9 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template     : `
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-layout-footer]': 'true'
+  }
 })
-export class NzFooterComponent {
-  @HostBinding('class.ant-layout-footer') _nzLayoutFooter = true;
-}
+export class NzFooterComponent { }
diff --git a/src/components/layout/nz-header.component.ts b/src/components/layout/nz-header.component.ts
@@ -4,8 +4,9 @@ import { Component, HostBinding } from '@angular/core';
   selector     : 'nz-header',
   template     : `
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-layout-header]': 'true'
+  }
 })
-export class NzHeaderComponent {
-  @HostBinding('class.ant-layout-header') _nzLayoutHeader = true;
-}
+export class NzHeaderComponent { }
diff --git a/src/components/layout/nz-layout.component.ts b/src/components/layout/nz-layout.component.ts
@@ -9,10 +9,11 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-layout]': 'true'
+  }
 })
 export class NzLayoutComponent {
   @HostBinding('class.ant-layout-has-sider') hasSider = false;
-
-  @HostBinding('class.ant-layout') _nzLayout = true;
 }
diff --git a/src/components/layout/nz-sider.component.ts b/src/components/layout/nz-sider.component.ts
@@ -25,7 +25,10 @@ export type NzBreakPoinit = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     <div class="ant-layout-sider-trigger" *ngIf="_isSiderTrgger" (click)="toggleCollapse()">
       <i class="anticon" [class.anticon-left]="!nzCollapsed" [class.anticon-right]="nzCollapsed"></i>
     </div>
-  `
+  `,
+  host: {
+    '[class.ant-layout-sider]': 'true'
+  }
 })
 export class NzSiderComponent {
   private _collapsed = false;
@@ -73,7 +76,6 @@ export class NzSiderComponent {
   }
 
   @Output() nzCollapsedChange = new EventEmitter();
-  @HostBinding('class.ant-layout-sider') _nzLayoutSider = true;
 
   @HostBinding('class.ant-layout-sider-zero-width')
   get setZeroClass() {