refactor: change to host class binding (#7148)

NG-ZORRO · Dec 23, 2021 · c177558 · c177558
1 parent c9befd2
commit c177558
Show file tree

Hide file tree

Showing 63 changed files with 159 additions and 346 deletions.
diff --git a/components/avatar/avatar.component.ts b/components/avatar/avatar.component.ts
@@ -38,6 +38,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
     <span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>
   `,
   host: {
+    class: 'ant-avatar',
     '[class.ant-avatar-lg]': `nzSize === 'large'`,
     '[class.ant-avatar-sm]': `nzSize === 'small'`,
     '[class.ant-avatar-square]': `nzShape === 'square'`,
@@ -84,10 +85,7 @@ export class NzAvatarComponent implements OnChanges {
     private elementRef: ElementRef,
     private cdr: ChangeDetectorRef,
     private platform: Platform
-  ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-avatar');
-  }
+  ) {}
 
   imgError($event: Event): void {
     this.nzError.emit($event);

diff --git a/components/badge/badge-sup.component.ts b/components/badge/badge-sup.component.ts
@@ -6,7 +6,6 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   Input,
   OnChanges,
   OnInit,
@@ -47,6 +46,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
     <ng-template #overflowTemplate>{{ nzOverflowCount }}+</ng-template>
   `,
   host: {
+    class: 'ant-scroll-number',
     '[@.disabled]': `disableAnimation`,
     '[@zoomBadgeMotion]': '',
     '[attr.title]': `nzTitle === null ? '' : nzTitle || nzCount`,
@@ -72,10 +72,7 @@ export class NzBadgeSupComponent implements OnInit, OnChanges {
   count: number = 0;
   countSingleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
-  constructor(private elementRef: ElementRef) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-scroll-number');
-  }
+  constructor() {}
 
   generateMaxNumberArray(): void {
     this.maxNumberArray = this.nzOverflowCount.toString().split('');

diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts
@@ -68,6 +68,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
     </ng-container>
   `,
   host: {
+    class: 'ant-badge',
     '[class.ant-badge-status]': 'nzStatus',
     '[class.ant-badge-not-a-wrapper]': '!!(nzStandalone || nzStatus || nzColor)'
   }
@@ -102,10 +103,7 @@ export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit {
     private elementRef: ElementRef,
     @Optional() private directionality: Directionality,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
-  ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-badge');
-  }
+  ) {}
   ngOnInit(): void {
     this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;

diff --git a/components/badge/ribbon.component.ts b/components/badge/ribbon.component.ts
@@ -6,7 +6,6 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   Input,
   OnChanges,
   SimpleChanges,
@@ -34,18 +33,16 @@ import { badgePresetColors } from './preset-colors';
       <ng-container *nzStringTemplateOutlet="nzText">{{ nzText }}</ng-container>
       <div class="ant-ribbon-corner" [style.color]="!presetColor && nzColor"></div>
     </div>
-  `
+  `,
+  host: { class: 'ant-ribbon-wrapper' }
 })
 export class NzRibbonComponent implements OnChanges {
   @Input() nzColor: string | undefined;
   @Input() nzPlacement: 'start' | 'end' = 'end';
   @Input() nzText: string | TemplateRef<void> | null = null;
   presetColor: string | null = null;
 
-  constructor(private elementRef: ElementRef) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-ribbon-wrapper');
-  }
+  constructor() {}
 
   ngOnChanges(changes: SimpleChanges): void {
     const { nzColor } = changes;

diff --git a/components/button/button-group.component.ts b/components/button/button-group.component.ts
@@ -7,7 +7,6 @@ import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   Input,
   OnDestroy,
   OnInit,
@@ -25,6 +24,7 @@ export type NzButtonGroupSize = 'large' | 'default' | 'small';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {
+    class: 'ant-btn-group',
     '[class.ant-btn-group-lg]': `nzSize === 'large'`,
     '[class.ant-btn-group-sm]': `nzSize === 'small'`,
     '[class.ant-btn-group-rtl]': `dir === 'rtl'`
@@ -39,10 +39,7 @@ export class NzButtonGroupComponent implements OnDestroy, OnInit {
 
   private destroy$ = new Subject<void>();
 
-  constructor(private elementRef: ElementRef, @Optional() private directionality: Directionality) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-btn-group');
-  }
+  constructor(@Optional() private directionality: Directionality) {}
   ngOnInit(): void {
     this.dir = this.directionality.value;
     this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {

diff --git a/components/button/button.component.ts b/components/button/button.component.ts
@@ -47,6 +47,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
     <ng-content></ng-content>
   `,
   host: {
+    class: 'ant-btn',
     '[class.ant-btn-primary]': `nzType === 'primary'`,
     '[class.ant-btn-dashed]': `nzType === 'dashed'`,
     '[class.ant-btn-link]': `nzType === 'link'`,
@@ -119,8 +120,6 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
     public nzConfigService: NzConfigService,
     @Optional() private directionality: Directionality
   ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-btn');
     this.nzConfigService
       .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
       .pipe(takeUntil(this.destroy$))

diff --git a/components/calendar/calendar-header.component.ts b/components/calendar/calendar-header.component.ts
@@ -6,7 +6,6 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   EventEmitter,
   Input,
   OnInit,
@@ -58,6 +57,7 @@ import { NzSelectSizeType } from 'ng-zorro-antd/select';
     </div>
   `,
   host: {
+    class: 'ant-fullcalendar-header',
     '[style.display]': `'block'`
   }
 })
@@ -96,10 +96,7 @@ export class NzCalendarHeaderComponent implements OnInit {
     return this.i18n.getLocale().Calendar.lang.month;
   }
 
-  constructor(private i18n: I18n, private dateHelper: DateHelperService, private elementRef: ElementRef) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-fullcalendar-header');
-  }
+  constructor(private i18n: I18n, private dateHelper: DateHelperService) {}
 
   ngOnInit(): void {
     this.setUpYears();

diff --git a/components/calendar/calendar.component.ts b/components/calendar/calendar.component.ts
@@ -9,7 +9,6 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChild,
-  ElementRef,
   EventEmitter,
   forwardRef,
   Input,
@@ -88,6 +87,7 @@ type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
     </ng-template>
   `,
   host: {
+    class: 'ant-picker-calendar',
     '[class.ant-picker-calendar-full]': 'nzFullscreen',
     '[class.ant-picker-calendar-mini]': '!nzFullscreen',
     '[class.ant-picker-calendar-rtl]': `dir === 'rtl'`
@@ -144,14 +144,7 @@ export class NzCalendarComponent implements ControlValueAccessor, OnChanges, OnI
 
   @Input() @InputBoolean() nzFullscreen: boolean = true;
 
-  constructor(
-    private cdr: ChangeDetectorRef,
-    private elementRef: ElementRef,
-    @Optional() private directionality: Directionality
-  ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-picker-calendar');
-  }
+  constructor(private cdr: ChangeDetectorRef, @Optional() private directionality: Directionality) {}
 
   ngOnInit(): void {
     this.dir = this.directionality.value;

diff --git a/components/card/card-grid.directive.ts b/components/card/card-grid.directive.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
@@ -12,15 +12,13 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
   selector: '[nz-card-grid]',
   exportAs: 'nzCardGrid',
   host: {
+    class: 'ant-card-grid',
     '[class.ant-card-hoverable]': 'nzHoverable'
   }
 })
 export class NzCardGridDirective {
   static ngAcceptInputType_nzHoverable: BooleanInput;
   @Input() @InputBoolean() nzHoverable = true;
 
-  constructor(private elementRef: ElementRef) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-card-grid');
-  }
+  constructor() {}
 }
diff --git a/components/card/card-loading.component.ts b/components/card/card-loading.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'nz-card-loading',
@@ -23,7 +23,8 @@ import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation } fro
   `,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'ant-card-loading-content' }
 })
 export class NzCardLoadingComponent {
   listOfLoading: string[][] = [
@@ -34,8 +35,5 @@ export class NzCardLoadingComponent {
     ['ant-col-4', 'ant-col-3', 'ant-col-16'],
     ['ant-col-8', 'ant-col-6', 'ant-col-8']
   ];
-  constructor(private elementRef: ElementRef) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-card-loading-content');
-  }
+  constructor() {}
 }
diff --git a/components/card/card-meta.component.ts b/components/card/card-meta.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'nz-card-meta',
@@ -23,15 +23,13 @@ import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, Vie
         <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
       </div>
     </div>
-  `
+  `,
+  host: { class: 'ant-card-meta' }
 })
 export class NzCardMetaComponent {
   @Input() nzTitle: string | TemplateRef<void> | null = null;
   @Input() nzDescription: string | TemplateRef<void> | null = null;
   @Input() nzAvatar: TemplateRef<void> | null = null;
 
-  constructor(private elementRef: ElementRef) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-card-meta');
-  }
+  constructor() {}
 }
diff --git a/components/card/card.component.ts b/components/card/card.component.ts
@@ -10,7 +10,6 @@ import {
   Component,
   ContentChild,
   ContentChildren,
-  ElementRef,
   Input,
   OnDestroy,
   OnInit,
@@ -69,6 +68,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
     </ul>
   `,
   host: {
+    class: 'ant-card',
     '[class.ant-card-loading]': 'nzLoading',
     '[class.ant-card-bordered]': 'nzBorderless === false && nzBordered',
     '[class.ant-card-hoverable]': 'nzHoverable',
@@ -106,12 +106,8 @@ export class NzCardComponent implements OnDestroy, OnInit {
   constructor(
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
-    private elementRef: ElementRef,
     @Optional() private directionality: Directionality
   ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-card');
-
     this.nzConfigService
       .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
       .pipe(takeUntil(this.destroy$))

diff --git a/components/checkbox/checkbox-group.component.ts b/components/checkbox/checkbox-group.component.ts
@@ -55,6 +55,7 @@ export interface NzCheckBoxOptionInterface {
     }
   ],
   host: {
+    class: 'ant-checkbox-group',
     '[class.ant-checkbox-group-rtl]': `dir === 'rtl'`
   }
 })
@@ -84,10 +85,7 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O
     private focusMonitor: FocusMonitor,
     private cdr: ChangeDetectorRef,
     @Optional() private directionality: Directionality
-  ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-checkbox-group');
-  }
+  ) {}
 
   ngOnInit(): void {
     this.focusMonitor

diff --git a/components/checkbox/checkbox.component.ts b/components/checkbox/checkbox.component.ts
@@ -67,6 +67,7 @@ import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
     }
   ],
   host: {
+    class: 'ant-checkbox-wrapper',
     '[class.ant-checkbox-wrapper-checked]': 'nzChecked',
     '[class.ant-checkbox-rtl]': `dir === 'rtl'`,
     '(click)': 'hostClick($event)'
@@ -141,10 +142,7 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnDest
     private cdr: ChangeDetectorRef,
     private focusMonitor: FocusMonitor,
     @Optional() private directionality: Directionality
-  ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-checkbox-wrapper');
-  }
+  ) {}
 
   ngOnInit(): void {
     this.focusMonitor

diff --git a/components/collapse/collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts
@@ -7,7 +7,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
   EventEmitter,
   Host,
   Input,
@@ -62,6 +61,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
   `,
 
   host: {
+    class: 'ant-collapse-item',
     '[class.ant-collapse-no-arrow]': '!nzShowArrow',
     '[class.ant-collapse-item-active]': 'nzActive',
     '[class.ant-collapse-item-disabled]': 'nzDisabled'
@@ -95,11 +95,8 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
     @Host() private nzCollapseComponent: NzCollapseComponent,
-    private elementRef: ElementRef,
     @Optional() public noAnimation?: NzNoAnimationDirective
   ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-collapse-item');
     this.nzConfigService
       .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
       .pipe(takeUntil(this.destroy$))