refactor(module:date-picker): move class control to host

components/date-picker/abstract-picker.component.ts

@@ -8,6 +8,7 @@
 
 import {
   ChangeDetectorRef,
+  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
@@ -21,7 +22,13 @@ import { ControlValueAccessor } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { CandyDate, InputBoolean, NzNoAnimationDirective } from 'ng-zorro-antd/core';
+import {
+  warnDeprecation,
+  CandyDate,
+  InputBoolean,
+  NzNoAnimationDirective,
+  NzUpdateHostClassService
+} from 'ng-zorro-antd/core';
 import { DateHelperService, NzDatePickerI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { NzPickerComponent } from './picker.component';
@@ -38,6 +45,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
   @Input() @InputBoolean() nzAutoFocus: boolean = false;
   @Input() @InputBoolean() nzDisabled: boolean = false;
   @Input() @InputBoolean() nzOpen: boolean;
+  // deprecated in 9.0.0
   @Input() nzClassName: string;
   @Input() nzDisabledDate: (d: Date) => boolean;
   @Input() nzLocale: NzDatePickerI18nInterface;
@@ -54,6 +62,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
   @ViewChild(NzPickerComponent, { static: true }) protected picker: NzPickerComponent;
 
   isRange: boolean = false; // Indicate whether the value is a range value
+  prefixCls = 'ant-calendar';
 
   get realOpenState(): boolean {
     return this.picker.animationOpenState;
@@ -70,6 +79,8 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
     protected i18n: NzI18nService,
     protected cdr: ChangeDetectorRef,
     protected dateHelper: DateHelperService,
+    protected updateHostClassService: NzUpdateHostClassService,
+    protected el: ElementRef,
     public noAnimation?: NzNoAnimationDirective
   ) {}
 
@@ -98,6 +109,20 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
       // The nzLocale is currently handled by user
       this.setDefaultPlaceHolder();
     }
+
+    if (changes.nzSize) {
+      const size = changes.nzSize.currentValue;
+      const classMap = {
+        [`${this.prefixCls}-picker`]: true,
+        [`${this.prefixCls}-picker-large`]: size === 'large',
+        [`${this.prefixCls}-picker-small`]: size === 'small'
+      };
+      this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
+    }
+
+    if (changes.nzClassName) {
+      warnDeprecation(`'nzClassName' is deprecated and would be removed in 9.0.0.`);
+    }
   }
 
   ngOnDestroy(): void {
@@ -168,6 +193,8 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
     this.cdr.markForCheck();
   }
 
+  updateHostClass(): void {}
+
   // ------------------------------------------------------------------------
   // | Internal methods
   // ------------------------------------------------------------------------

components/date-picker/date-range-picker.component.html

@@ -1,4 +1,5 @@
-<nz-picker
+<div
+  nz-picker
   [isRange]="isRange"
   [value]="nzValue"
   (valueChange)="onValueChange($event)"
@@ -7,10 +8,11 @@
   [format]="nzFormat"
   [allowClear]="nzAllowClear"
   [autoFocus]="nzAutoFocus"
-  [className]="nzClassName"
+  [ngClass]="nzClassName"
+  [style]="nzStyle"
+  [ngStyle]="pickerStyle"
   [placeholder]="nzPlaceHolder"
   [size]="nzSize"
-  [style]="pickerStyle"
   [noAnimation]="noAnimation?.nzNoAnimation"
   (openChange)="onOpenChange($event)"
 >
@@ -38,4 +40,4 @@
     (resultOk)="onResultOk()"
     (closePicker)="closeOverlay()"
   ></date-range-popup>
-</nz-picker>
+</div>

components/date-picker/date-range-picker.component.ts

@@ -9,6 +9,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
@@ -24,15 +25,17 @@ import {
   CandyDate,
   FunctionProp,
   InputBoolean,
-  NzNoAnimationDirective
+  NzNoAnimationDirective,
+  NzUpdateHostClassService
 } from 'ng-zorro-antd/core';
 import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { AbstractPickerComponent } from './abstract-picker.component';
 import { CompatibleDate, DisabledTimeFn, PanelMode, PresetRanges } from './standard-types';
 
 @Component({
-  template: `` // Just for rollup
+  template: ``, // Just for rollup
+  providers: [NzUpdateHostClassService]
 })
 export class DateRangePickerComponent extends AbstractPickerComponent implements OnInit, OnChanges {
   showWeek: boolean = false; // Should show as week picker
@@ -68,9 +71,11 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
     i18n: NzI18nService,
     cdr: ChangeDetectorRef,
     dateHelper: DateHelperService,
+    updateHostClassService: NzUpdateHostClassService,
+    el: ElementRef,
     noAnimation?: NzNoAnimationDirective
   ) {
-    super(i18n, cdr, dateHelper, noAnimation);
+    super(i18n, cdr, dateHelper, updateHostClassService, el, noAnimation);
   }
 
   ngOnInit(): void {

components/date-picker/header-picker.component.html

@@ -1,4 +1,5 @@
-<nz-picker
+<div
+  nz-picker
   [isRange]="false"
   [value]="nzValue"
   (valueChange)="onValueChange($event)"
@@ -7,7 +8,8 @@
   [format]="nzFormat"
   [allowClear]="nzAllowClear"
   [autoFocus]="nzAutoFocus"
-  [className]="nzClassName"
+  [ngClass]="nzClassName"
+  [ngStyle]="nzStyle"
   [placeholder]="nzPlaceHolder"
   [size]="nzSize"
   [style]="nzStyle"
@@ -37,4 +39,4 @@
       </div>
     </div>
   </div>
-</nz-picker>
+</div>

components/date-picker/header-picker.component.ts

@@ -6,9 +6,24 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
-
-import { valueFunctionProp, CandyDate, FunctionProp, NzNoAnimationDirective } from 'ng-zorro-antd/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  TemplateRef
+} from '@angular/core';
+
+import {
+  valueFunctionProp,
+  CandyDate,
+  FunctionProp,
+  NzNoAnimationDirective,
+  NzUpdateHostClassService
+} from 'ng-zorro-antd/core';
 import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { AbstractPickerComponent } from './abstract-picker.component';
@@ -38,9 +53,11 @@ export class HeaderPickerComponent extends AbstractPickerComponent implements On
     i18n: NzI18nService,
     cdr: ChangeDetectorRef,
     dateHelper: DateHelperService,
+    updateHostClassService: NzUpdateHostClassService,
+    elementRef: ElementRef,
     noAnimation?: NzNoAnimationDirective
   ) {
-    super(i18n, cdr, dateHelper, noAnimation);
+    super(i18n, cdr, dateHelper, updateHostClassService, elementRef, noAnimation);
   }
 
   ngOnInit(): void {

components/date-picker/nz-date-picker.component.spec.ts

@@ -9,11 +9,19 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import isSameDay from 'date-fns/is_same_day';
 
-import { dispatchKeyboardEvent, dispatchMouseEvent, typeInElement, NgStyleInterface } from 'ng-zorro-antd/core';
+import {
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+  typeInElement,
+  NgStyleInterface,
+  NzUpdateHostClassService
+} from 'ng-zorro-antd/core';
 import en_US from '../i18n/languages/en_US';
 
 import { NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzDatePickerModule } from './nz-date-picker.module';
+import { NzPickerComponent } from './picker.component';
+import { getPickerAbstract, getPickerInput, getPickerTrigger } from './test-util';
 
 registerLocaleData(zh);
 
@@ -30,6 +38,7 @@ describe('NzDatePickerComponent', () => {
       imports: [FormsModule, NoopAnimationsModule, NzDatePickerModule, NzI18nModule],
       providers: [
         // { provide: NZ_DATE_CONFIG, useValue: { firstDayOfWeek: 1 } }
+        NzUpdateHostClassService
       ],
       declarations: [NzTestDatePickerComponent]
     });
@@ -79,7 +88,7 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
-      expect(document.activeElement).toEqual(getPickerTrigger());
+      expect(document.activeElement).toEqual(getPickerInput(debugElement));
     }));
 
     it('should open on enter', fakeAsync(() => {
@@ -129,11 +138,11 @@ describe('NzDatePickerComponent', () => {
 
     it('should support changing language at runtime', fakeAsync(() => {
       fixture.detectChanges();
-      expect(getPickerTrigger().placeholder).toBe('请选择日期');
+      expect(getPickerInput(debugElement).placeholder).toBe('请选择日期');
       i18nService.setLocale(en_US);
       // i18nService.setDateLocale(en);
       fixture.detectChanges();
-      expect(getPickerTrigger().placeholder).toBe('Select date');
+      expect(getPickerInput(debugElement).placeholder).toBe('Select date');
 
       dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
       fixture.detectChanges();
@@ -168,7 +177,7 @@ describe('NzDatePickerComponent', () => {
     }));
 
     it('should support nzAllowClear and work properly', fakeAsync(() => {
-      const clearBtnSelector = By.css('nz-picker i.ant-calendar-picker-clear');
+      const clearBtnSelector = By.css('div i.ant-calendar-picker-clear');
       const initial = (fixtureInstance.nzValue = new Date());
       fixtureInstance.nzAllowClear = false;
       fixture.detectChanges();
@@ -191,7 +200,7 @@ describe('NzDatePickerComponent', () => {
     it('should support nzAutoFocus', () => {
       fixtureInstance.nzAutoFocus = true;
       fixture.detectChanges();
-      expect(getPickerTrigger() === document.activeElement).toBeTruthy();
+      expect(getPickerInput(debugElement) === document.activeElement).toBeTruthy();
     });
 
     it('should support nzDisabled', fakeAsync(() => {
@@ -203,14 +212,14 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
-      expect(debugElement.query(By.css('nz-picker .ant-input-disabled'))).toBeDefined();
-      expect(debugElement.query(By.css('nz-picker i.ant-calendar-picker-clear'))).toBeNull();
+      expect(debugElement.query(By.css('div .ant-input-disabled'))).toBeDefined();
+      expect(debugElement.query(By.css('div i.ant-calendar-picker-clear'))).toBeNull();
 
       fixtureInstance.nzDisabled = false;
       tick(500);
       fixture.detectChanges();
-      expect(debugElement.query(By.css('nz-picker .ant-input-disabled'))).toBeNull();
-      expect(debugElement.query(By.css('nz-picker i.ant-calendar-picker-clear'))).toBeDefined();
+      expect(debugElement.query(By.css('div .ant-input-disabled'))).toBeNull();
+      expect(debugElement.query(By.css('div i.ant-calendar-picker-clear'))).toBeDefined();
     }));
 
     it('should support nzOpen if assigned', fakeAsync(() => {
@@ -237,7 +246,7 @@ describe('NzDatePickerComponent', () => {
     it('should support nzClassName', () => {
       const className = (fixtureInstance.nzClassName = 'my-test-class');
       fixture.detectChanges();
-      const picker = debugElement.queryAll(By.css('.ant-calendar-picker'))[1].nativeElement as HTMLElement;
+      const picker = debugElement.query(By.directive(NzPickerComponent)).nativeElement as HTMLElement;
       expect(picker.classList.contains(className)).toBeTruthy();
     });
 
@@ -274,13 +283,13 @@ describe('NzDatePickerComponent', () => {
       const featureKey = 'TEST_PLACEHOLDER';
       fixtureInstance.nzLocale = { lang: { placeholder: featureKey } };
       fixture.detectChanges();
-      expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
+      expect(getPickerInput(debugElement).getAttribute('placeholder')).toBe(featureKey);
     });
 
     it('should support nzPlaceHolder', () => {
       const featureKey = (fixtureInstance.nzPlaceHolder = 'TEST_PLACEHOLDER');
       fixture.detectChanges();
-      expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
+      expect(getPickerInput(debugElement).getAttribute('placeholder')).toBe(featureKey);
     });
 
     it('should support nzPopupStyle', fakeAsync(() => {
@@ -316,7 +325,8 @@ describe('NzDatePickerComponent', () => {
     it('should support nzStyle', () => {
       fixtureInstance.nzStyle = { color: 'blue' };
       fixture.detectChanges();
-      expect(getPicker().style.color).toBe('blue');
+      expect(getPickerTriggerWrapper().style.color).toBe('blue');
+      expect(getPickerInput(debugElement).style.color).toBe('blue');
     });
 
     it('should support nzOnOpenChange', () => {
@@ -836,15 +846,11 @@ describe('NzDatePickerComponent', () => {
   ////////////
 
   function getPicker(): HTMLElement {
-    return debugElement.query(By.css('nz-picker .ant-calendar-picker')).nativeElement as HTMLElement;
+    return getPickerAbstract(debugElement);
   }
 
-  function getPickerTrigger(): HTMLInputElement {
-    return debugElement.query(By.css('nz-picker input.ant-calendar-picker-input')).nativeElement as HTMLInputElement;
-  }
-
-  function getPickerTriggerWrapper(): HTMLInputElement {
-    return debugElement.query(By.css('nz-picker .ant-calendar-picker')).nativeElement as HTMLInputElement;
+  function getPickerTriggerWrapper(): HTMLElement {
+    return getPickerTrigger(debugElement);
   }
 
   function getPickerContainer(): HTMLElement {

components/date-picker/nz-date-picker.component.ts

@@ -19,7 +19,7 @@ import {
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { NzNoAnimationDirective } from 'ng-zorro-antd/core';
+import { NzNoAnimationDirective, NzUpdateHostClassService } from 'ng-zorro-antd/core';
 import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { DateRangePickerComponent } from './date-range-picker.component';
@@ -45,11 +45,12 @@ export class NzDatePickerComponent extends DateRangePickerComponent {
     i18n: NzI18nService,
     cdr: ChangeDetectorRef,
     dateHelper: DateHelperService,
+    updateHostClassService: NzUpdateHostClassService,
     renderer: Renderer2,
     elementRef: ElementRef,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
   ) {
-    super(i18n, cdr, dateHelper, noAnimation);
+    super(i18n, cdr, dateHelper, updateHostClassService, elementRef, noAnimation);
     renderer.addClass(elementRef.nativeElement, 'ant-calendar-picker');
   }
 }