perf(module:checkbox): use css empty selector instead of observeConte…

…nt (#4761)

components/checkbox/nz-checkbox-group.component.ts → components/checkbox/checkbox-group.component.ts

@@ -7,20 +7,10 @@
  */
 
 import { FocusMonitor } from '@angular/cdk/a11y';
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  ViewEncapsulation
-} from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
 import { InputBoolean } from 'ng-zorro-antd/core';
+import { OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 
 export interface NzCheckBoxOptionInterface {
   label: string;
@@ -34,34 +24,40 @@ export interface NzCheckBoxOptionInterface {
   exportAs: 'nzCheckboxGroup',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './nz-checkbox-group.component.html',
+  template: `
+    <label
+      nz-checkbox
+      class="ant-checkbox-group-item"
+      *ngFor="let o of options; trackBy: trackByOption"
+      [nzDisabled]="o.disabled || nzDisabled"
+      [(nzChecked)]="o.checked"
+      (nzCheckedChange)="onChange(options)"
+    >
+      <span>{{ o.label }}</span>
+    </label>
+  `,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => NzCheckboxGroupComponent),
       multi: true
     }
-  ]
+  ],
+  host: {
+    '[class.ant-checkbox-group]': 'true'
+  }
 })
 export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, OnDestroy {
-  // tslint:disable-next-line:no-any
-  onChange: (value: any) => void = () => null;
-  // tslint:disable-next-line:no-any
-  onTouched: () => any = () => null;
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
   options: NzCheckBoxOptionInterface[] = [];
   @Input() @InputBoolean() nzDisabled = false;
 
-  onOptionChange(): void {
-    this.onChange(this.options);
-  }
-
-  trackByOption(_index: number, option: NzCheckBoxOptionInterface): string {
+  trackByOption(_: number, option: NzCheckBoxOptionInterface): string {
     return option.value;
   }
 
-  constructor(private elementRef: ElementRef, private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef, renderer: Renderer2) {
-    renderer.addClass(elementRef.nativeElement, 'ant-checkbox-group');
-  }
+  constructor(private elementRef: ElementRef, private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef) {}
 
   ngOnInit(): void {
     this.focusMonitor.monitor(this.elementRef, true).subscribe(focusOrigin => {
@@ -80,16 +76,16 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O
     this.cdr.markForCheck();
   }
 
-  registerOnChange(fn: (_: NzCheckBoxOptionInterface[]) => {}): void {
+  registerOnChange(fn: OnChangeType): void {
     this.onChange = fn;
   }
 
-  registerOnTouched(fn: () => {}): void {
+  registerOnTouched(fn: OnTouchedType): void {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
-    this.nzDisabled = isDisabled;
+  setDisabledState(disabled: boolean): void {
+    this.nzDisabled = disabled;
     this.cdr.markForCheck();
   }
 }

components/checkbox/nz-checkbox-wrapper.component.ts → components/checkbox/checkbox-wrapper.component.ts

@@ -7,19 +7,21 @@
  */
 
 import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, Renderer2, ViewEncapsulation } from '@angular/core';
-
-import { NzCheckboxComponent } from './nz-checkbox.component';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzCheckboxComponent } from './checkbox.component';
 
 @Component({
   selector: 'nz-checkbox-wrapper',
   exportAs: 'nzCheckboxWrapper',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './nz-checkbox-wrapper.component.html'
+  template: `
+    <ng-content></ng-content>
+  `
 })
 export class NzCheckboxWrapperComponent {
-  @Output() readonly nzOnChange = new EventEmitter<string[]>();
+  @Output() readonly nzOnChange = new EventEmitter<NzSafeAny[]>();
   private checkboxList: NzCheckboxComponent[] = [];
 
   addCheckbox(value: NzCheckboxComponent): void {
@@ -30,13 +32,9 @@ export class NzCheckboxWrapperComponent {
     this.checkboxList.splice(this.checkboxList.indexOf(value), 1);
   }
 
-  outputValue(): string[] {
-    const checkedList = this.checkboxList.filter(item => item.nzChecked);
-    return checkedList.map(item => item.nzValue);
-  }
-
   onChange(): void {
-    this.nzOnChange.emit(this.outputValue());
+    const listOfCheckedValue = this.checkboxList.filter(item => item.nzChecked).map(item => item.nzValue);
+    this.nzOnChange.emit(listOfCheckedValue);
   }
 
   constructor(renderer: Renderer2, elementRef: ElementRef) {

components/checkbox/nz-checkbox.component.ts → components/checkbox/checkbox.component.ts

@@ -16,29 +16,46 @@ import {
   EventEmitter,
   forwardRef,
   Input,
-  OnChanges,
   OnDestroy,
   OnInit,
   Optional,
   Output,
-  Renderer2,
-  SimpleChanges,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-import { InputBoolean, isEmpty } from 'ng-zorro-antd/core';
-
-import { NzCheckboxWrapperComponent } from './nz-checkbox-wrapper.component';
+import { InputBoolean } from 'ng-zorro-antd/core';
+import { NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
+import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
 
 @Component({
   selector: '[nz-checkbox]',
   exportAs: 'nzCheckbox',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './nz-checkbox.component.html',
+  template: `
+    <span
+      class="ant-checkbox"
+      [class.ant-checkbox-checked]="nzChecked && !nzIndeterminate"
+      [class.ant-checkbox-disabled]="nzDisabled"
+      [class.ant-checkbox-indeterminate]="nzIndeterminate"
+    >
+      <input
+        #inputElement
+        type="checkbox"
+        class="ant-checkbox-input"
+        [attr.autofocus]="nzAutoFocus ? 'autofocus' : null"
+        [checked]="nzChecked"
+        [ngModel]="nzChecked"
+        [disabled]="nzDisabled"
+        (ngModelChange)="innerCheckedChange($event)"
+        (click)="$event.stopPropagation()"
+      />
+      <span class="ant-checkbox-inner"></span>
+    </span>
+    <span><ng-content></ng-content></span>
+  `,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -47,18 +64,17 @@ import { NzCheckboxWrapperComponent } from './nz-checkbox-wrapper.component';
     }
   ],
   host: {
+    '[class.ant-checkbox-wrapper]': 'true',
+    '[class.ant-checkbox-wrapper-checked]': 'nzChecked',
     '(click)': 'hostClick($event)'
   }
 })
-export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChanges, AfterViewInit, OnDestroy {
-  // tslint:disable-next-line:no-any
-  onChange: (value: any) => void = () => null;
-  // tslint:disable-next-line:no-any
-  onTouched: () => any = () => null;
+export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnDestroy, AfterViewInit {
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
   @ViewChild('inputElement', { static: true }) private inputElement: ElementRef;
-  @ViewChild('contentElement', { static: false }) private contentElement: ElementRef;
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
-  @Input() nzValue: string;
+  @Input() nzValue: NzSafeAny | null = null;
   @Input() @InputBoolean() nzAutoFocus = false;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzIndeterminate = false;
@@ -81,29 +97,21 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan
     }
   }
 
-  updateAutoFocus(): void {
-    if (this.inputElement && this.nzAutoFocus) {
-      this.renderer.setAttribute(this.inputElement.nativeElement, 'autofocus', 'autofocus');
-    } else {
-      this.renderer.removeAttribute(this.inputElement.nativeElement, 'autofocus');
-    }
-  }
-
   writeValue(value: boolean): void {
     this.nzChecked = value;
     this.cdr.markForCheck();
   }
 
-  registerOnChange(fn: (_: boolean) => {}): void {
+  registerOnChange(fn: OnChangeType): void {
     this.onChange = fn;
   }
 
-  registerOnTouched(fn: () => {}): void {
+  registerOnTouched(fn: OnTouchedType): void {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
-    this.nzDisabled = isDisabled;
+  setDisabledState(disabled: boolean): void {
+    this.nzDisabled = disabled;
     this.cdr.markForCheck();
   }
 
@@ -115,23 +123,12 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan
     this.inputElement.nativeElement.blur();
   }
 
-  checkContent(): void {
-    if (isEmpty(this.contentElement.nativeElement)) {
-      this.renderer.setStyle(this.contentElement.nativeElement, 'display', 'none');
-    } else {
-      this.renderer.removeStyle(this.contentElement.nativeElement, 'display');
-    }
-  }
-
   constructor(
     private elementRef: ElementRef<HTMLElement>,
-    private renderer: Renderer2,
     @Optional() private nzCheckboxWrapperComponent: NzCheckboxWrapperComponent,
     private cdr: ChangeDetectorRef,
     private focusMonitor: FocusMonitor
-  ) {
-    renderer.addClass(elementRef.nativeElement, 'ant-checkbox-wrapper');
-  }
+  ) {}
 
   ngOnInit(): void {
     this.focusMonitor.monitor(this.elementRef, true).subscribe(focusOrigin => {
@@ -143,16 +140,10 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan
       this.nzCheckboxWrapperComponent.addCheckbox(this);
     }
   }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.nzAutoFocus) {
-      this.updateAutoFocus();
-    }
-  }
-
   ngAfterViewInit(): void {
-    this.updateAutoFocus();
-    this.checkContent();
+    if (this.nzAutoFocus) {
+      this.focus();
+    }
   }
 
   ngOnDestroy(): void {

components/checkbox/nz-checkbox.module.ts → components/checkbox/checkbox.module.ts

@@ -6,17 +6,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ObserversModule } from '@angular/cdk/observers';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { NzCheckboxGroupComponent } from './nz-checkbox-group.component';
-import { NzCheckboxWrapperComponent } from './nz-checkbox-wrapper.component';
-import { NzCheckboxComponent } from './nz-checkbox.component';
+import { NzCheckboxGroupComponent } from './checkbox-group.component';
+import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
+import { NzCheckboxComponent } from './checkbox.component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, ObserversModule],
+  imports: [CommonModule, FormsModule],
   declarations: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent],
   exports: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent]
 })

components/checkbox/nz-checkbox.spec.ts → components/checkbox/checkbox.spec.ts

@@ -3,10 +3,10 @@ import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testi
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
-import { NzCheckboxGroupComponent } from './nz-checkbox-group.component';
-import { NzCheckboxWrapperComponent } from './nz-checkbox-wrapper.component';
-import { NzCheckboxComponent } from './nz-checkbox.component';
-import { NzCheckboxModule } from './nz-checkbox.module';
+import { NzCheckboxGroupComponent } from './checkbox-group.component';
+import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
+import { NzCheckboxComponent } from './checkbox.component';
+import { NzCheckboxModule } from './checkbox.module';
 
 describe('checkbox', () => {
   beforeEach(fakeAsync(() => {

components/checkbox/doc/index.en-US.md

@@ -25,7 +25,7 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 | `[nzDisabled]` | Disable checkbox | `boolean` | `false` |
 | `[ngModel]` | Specifies whether the checkbox is selected, double binding | `boolean` | `false` |
 | `[nzIndeterminate]` | set the status of indeterminate，only affect the style | `boolean` | `false` |
-| `[nzValue]` | use for the callback of `nz-checkbox-wrapper` | `string` | - |
+| `[nzValue]` | use for the callback of `nz-checkbox-wrapper` | `any` | - |
 | `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter<boolean>` | - |
 
 ### nz-checkbox-group
@@ -40,7 +40,7 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `(nzOnChange)` | The callback function that is triggered when the state changes. | `EventEmitter<string[]>` | - |
+| `(nzOnChange)` | The callback function that is triggered when the state changes. | `EventEmitter<any[]>` | - |
 
 ## Methods
 

components/checkbox/doc/index.zh-CN.md

@@ -26,7 +26,7 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 | `[nzDisabled]` | 设定 disable 状态 | `boolean` | `false` |
 | `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` |
 | `[nzIndeterminate]` | 设置 indeterminate 状态，只负责样式控制 | `boolean` | `false` |
-| `[nzValue]` | 仅与 `nz-checkbox-wrapper` 的选中回调配合使用 | `string` | - |
+| `[nzValue]` | 仅与 `nz-checkbox-wrapper` 的选中回调配合使用 | `any` | - |
 | `(ngModelChange)` | 选中变化时回调 | `EventEmitter<boolean>` | - |
 
 ### nz-checkbox-group
@@ -42,7 +42,7 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| `(nzOnChange)` | 选中数据变化时的回调 | `EventEmitter<string[]>` | - |
+| `(nzOnChange)` | 选中数据变化时的回调 | `EventEmitter<any[]>` | - |
 
 ## 方法