Merge branch 'master' into tsconfig-parameters

components/cascader/nz-cascader.component.html

@@ -47,6 +47,7 @@
 </div>
 <ng-template
   cdkConnectedOverlay
+  nzConnectedOverlay
   cdkConnectedOverlayHasBackdrop
   [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayPositions]="positions"

components/cascader/nz-cascader.module.ts

@@ -3,14 +3,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzEmptyModule } from '../empty/nz-empty.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 import { NzInputModule } from '../input/nz-input.module';
 import { NzCascaderOptionComponent } from './nz-cascader-li.component';
 import { NzCascaderComponent } from './nz-cascader.component';
 
 @NgModule({
-  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzEmptyModule ],
+  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzEmptyModule, NzOverlayModule ],
   declarations: [
     NzCascaderComponent,
     NzCascaderOptionComponent

components/core/overlay/nz-connected-overlay.ts

@@ -0,0 +1,13 @@
+import { CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[cdkConnectedOverlay][nzConnectedOverlay]'
+})
+export class NzConnectedOverlayDirective {
+
+  constructor(private cdkConnectedOverlay: CdkConnectedOverlay) {
+    this.cdkConnectedOverlay.backdropClass = 'nz-overlay-transparent-backdrop';
+  }
+
+}

components/core/overlay/nz-overlay.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { NzConnectedOverlayDirective } from './nz-connected-overlay';
+
+@NgModule({
+  declarations   : [ NzConnectedOverlayDirective ],
+  exports        : [ NzConnectedOverlayDirective ]
+})
+export class NzOverlayModule {
+
+}

components/core/style/index.less

@@ -60,6 +60,12 @@
   }
 }
 
+.nz-overlay-transparent-backdrop {
+  &, &.cdk-overlay-backdrop-showing {
+    opacity: 0;
+  }
+}
+
 .box-shadow-left() {
   .ant-table-th-right-sticky, .ant-table-td-right-sticky {
     box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);

components/date-picker/date-picker.module.ts

@@ -2,6 +2,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
 import { LibPackerModule } from './lib/lib-packer.module';
@@ -19,10 +20,9 @@ import { NzYearPickerComponent } from './year-picker.component';
   imports: [
     CommonModule,
     OverlayModule,
-
     LibPackerModule,
-
-    NzIconModule
+    NzIconModule,
+    NzOverlayModule
   ],
   exports: [
     NzDatePickerComponent,

components/date-picker/demo/disabled-date.ts

@@ -14,6 +14,8 @@ import setHours from 'date-fns/set_hours';
     <br>
     <nz-month-picker [nzDisabledDate]="disabledDate" nzPlaceHolder="Select month"></nz-month-picker>
     <br>
+    <nz-year-picker [nzDisabledDate]="disabledDate"></nz-year-picker>
+    <br>
     <nz-range-picker
       [nzDisabledDate]="disabledDate"
       [nzDisabledTime]="disabledRangeTime"
@@ -22,7 +24,7 @@ import setHours from 'date-fns/set_hours';
     ></nz-range-picker>
   `,
   styles  : [ `
-    nz-date-picker, nz-month-picker, nz-range-picker, nz-week-picker {
+    nz-date-picker, nz-month-picker, nz-year-picker, nz-range-picker, nz-week-picker {
       margin: 0 8px 12px 0;
     }
   ` ]

components/date-picker/doc/index.en-US.md

@@ -41,7 +41,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | `[nzClassName]` | picker className | `string` | `''` |
 | `[nzDateRender]` | custom rendering function for date cells (Not support by month-picker/year-picker) | `TemplateRef<Date>｜string｜((d: Date) => TemplateRef<Date>｜string)` | - |
 | `[nzDisabled]` | determine whether the nz-date-picker is disabled | `boolean` | `false` |
-| `[nzDisabledDate]` | specify the date that cannot be selected (Not support by year-picker) | `(current: Date) => boolean` | - |
+| `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - |
 | `[nzLocale]` | localization configuration | `object` | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
 | `[nzOpen]` | open state of picker | `boolean` | - |
 | `[nzPopupStyle]` | to customize the style of the popup calendar | `object` | `{}` |

components/date-picker/doc/index.zh-CN.md

@@ -41,7 +41,7 @@ registerLocaleData(zh);
 | `[nzClassName]` | 选择器 className | `string` | `''` |
 | `[nzDateRender]` | 自定义日期单元格的内容（month-picker/year-picker不支持） | `TemplateRef<Date>｜string｜((d: Date) => TemplateRef<Date>｜string)` | - |
 | `[nzDisabled]` | 禁用 | `boolean` | `false` |
-| `[nzDisabledDate]` | 不可选择的日期（year-picker不支持） | `(current: Date) => boolean` | - |
+| `[nzDisabledDate]` | 不可选择的日期 | `(current: Date) => boolean` | - |
 | `[nzLocale]` | 国际化配置 | `object` | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
 | `[nzOpen]` | 控制弹层是否展开 | `boolean` | - |
 | `[nzPopupStyle]` | 额外的弹出日历样式 | `object` | `{}` |

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

@@ -20,6 +20,7 @@
           <div class="ant-calendar-month-header-wrap">
             <calendar-header
               [disabledMonth]="nzDisabledDate"
+              [disabledYear]="nzDisabledDate"
               [panelMode]="panelMode"
               (panelModeChange)="onPanelModeChange($event)"
               [value]="nzValue"

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

@@ -51,6 +51,7 @@
       <year-panel
         [locale]="locale"
         [value]="value"
+        [disabledDate]="disabledYear"
         (valueChange)="onChooseYear($event)"
         (decadePanelShow)="changePanel('decade')"
       ></year-panel>

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

@@ -18,6 +18,7 @@ export class CalendarHeaderComponent implements OnInit, OnChanges {
   @Input() enablePrev: boolean = true;
   @Input() enableNext: boolean = true;
   @Input() disabledMonth: (date: Date) => boolean;
+  @Input() disabledYear: (date: Date) => boolean;
   @Input() showTimePicker: boolean = false;
 
   @Input() value: CandyDate;

components/date-picker/lib/year/year-panel.component.html

@@ -28,7 +28,7 @@
             <td *ngFor="let yearCell of row; trackBy: trackPanelYear"
               role="gridcell"
               title="{{ yearCell.title }}"
-              (click)="yearCell.onClick()"
+              (click)="yearCell.disabled ? null : yearCell.onClick()"
               [ngClass]="yearCell.classMap"
             >
               <a class="{{ prefixCls }}-year">{{ yearCell.content }}</a>

components/date-picker/lib/year/year-panel.component.ts

@@ -11,7 +11,17 @@ const MAX_COL = 3;
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'year-panel',
-  templateUrl: 'year-panel.component.html'
+  templateUrl: 'year-panel.component.html',
+  styles: [
+    // Support disabledDate
+    `
+      .ant-calendar-year-panel-cell-disabled .ant-calendar-year-panel-year, .ant-calendar-year-panel-cell-disabled .ant-calendar-year-panel-year:hover {
+        color: rgba(0,0,0,0.25);
+        background: #f5f5f5;
+        cursor: not-allowed;
+      }
+    `
+  ]
 })
 
 export class YearPanelComponent implements OnChanges {
@@ -20,6 +30,8 @@ export class YearPanelComponent implements OnChanges {
   @Input() value: CandyDate;
   @Output() readonly valueChange = new EventEmitter<CandyDate>();
 
+  @Input() disabledDate: (date: Date) => boolean;
+
   @Output() readonly decadePanelShow = new EventEmitter<void>();
 
   get currentYear(): number {
@@ -38,7 +50,7 @@ export class YearPanelComponent implements OnChanges {
   constructor() { }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.value) {
+    if (changes.value || changes.disabledDate) {
       this.render();
     }
   }
@@ -86,8 +98,10 @@ export class YearPanelComponent implements OnChanges {
       for (let colIndex = 0; colIndex < MAX_COL; colIndex ++) {
         const year = previousYear + index;
         const content = String(year);
+        const disabled = this.disabledDate ? this.disabledDate(this.value.setYear(year).nativeDate) : false;
 
         const cell = years[rowIndex][colIndex] = {
+          disabled,
           content,
           year,
           title: content,
@@ -101,6 +115,7 @@ export class YearPanelComponent implements OnChanges {
         cell.classMap = {
           [`${this.prefixCls}-cell`]: true,
           [`${this.prefixCls}-selected-cell`]: cell.isCurrent,
+          [`${this.prefixCls}-cell-disabled`]: disabled,
           [`${this.prefixCls}-last-decade-cell`]: cell.isLowerThanStart,
           [`${this.prefixCls}-next-decade-cell`]: cell.isBiggerThanEnd
         };
@@ -121,6 +136,7 @@ export class YearPanelComponent implements OnChanges {
 }
 
 export interface PanelYearData {
+  disabled: boolean;
   content: string;
   year: number;
   title: string;

components/date-picker/picker.component.html

@@ -69,6 +69,7 @@
 <!-- Overlay -->
 <ng-template
   cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayOpen]="realOpenState"
   [cdkConnectedOverlayHasBackdrop]="!isOpenHandledByUser()"

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

@@ -153,6 +153,22 @@ describe('NzYearPickerComponent', () => {
       expect(compStyles.getPropertyValue('border-bottom-right-radius') === '0px').toBeTruthy();
     });
 
+    it('should support nzDisabledDate', fakeAsync(() => {
+      fixture.detectChanges();
+      fixtureInstance.nzValue = new Date('2018-11-11 12:12:12');
+      fixtureInstance.nzDisabledDate = (current: Date) => current.getFullYear() === 2013;
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      const disabledCell = overlayContainerElement.querySelector('tbody.ant-calendar-year-panel-tbody tr td.ant-calendar-year-panel-cell-disabled');
+      expect(disabledCell.textContent).toContain('2013');
+    }));
+
     it('should support nzLocale', () => {
       const featureKey = 'TEST_PLACEHOLDER';
       fixtureInstance.nzLocale = { lang: { placeholder: featureKey } };
@@ -368,6 +384,7 @@ describe('NzYearPickerComponent', () => {
         [nzAllowClear]="nzAllowClear"
         [nzAutoFocus]="nzAutoFocus"
         [nzDisabled]="nzDisabled"
+        [nzDisabledDate]="nzDisabledDate"
         [nzClassName]="nzClassName"
         [nzLocale]="nzLocale"
         [nzPlaceHolder]="nzPlaceHolder"
@@ -411,6 +428,7 @@ class NzTestYearPickerComponent {
   nzAllowClear;
   nzAutoFocus;
   nzDisabled;
+  nzDisabledDate;
   nzClassName;
   nzLocale;
   nzPlaceHolder;

components/dropdown/nz-dropdown.component.html

@@ -15,10 +15,9 @@
     [style.minWidth.px]="triggerWidth"
     (mouseenter)="setVisibleStateWhen(true,'hover')"
     (mouseleave)="setVisibleStateWhen(false,'hover')">
-    <div [class.ant-table-filter-dropdown]="hasFilterButton">
+    <div [class.ant-table-filter-dropdown]="nzTableFilter">
       <ng-content select="[nz-menu]"></ng-content>
-      <ng-content select=".ant-table-filter-dropdown-btns"></ng-content>
+      <ng-content></ng-content>
     </div>
-    <ng-content></ng-content>
   </div>
 </ng-template>

components/dropdown/nz-dropdown.component.ts

@@ -56,14 +56,14 @@ export class NzDropDownComponent implements OnDestroy, AfterContentInit, OnChang
   @ContentChild(NzDropDownDirective) nzDropDownDirective: NzDropDownDirective;
   @ContentChild(NzMenuDirective) nzMenuDirective: NzMenuDirective;
   @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay;
-  @Input() hasFilterButton = false;
   @Input() nzTrigger: 'click' | 'hover' = 'hover';
   @Input() nzOverlayClassName = '';
   @Input() nzOverlayStyle: { [ key: string ]: string } = {};
   @Input() nzPlacement: NzPlacement = 'bottomLeft';
   @Input() @InputBoolean() nzClickHide = true;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzVisible = false;
+  @Input() @InputBoolean() nzTableFilter = false;
   @Output() readonly nzVisibleChange: EventEmitter<boolean> = new EventEmitter();
 
   setVisibleStateWhen(visible: boolean, trigger: 'click' | 'hover' | 'all' = 'all'): void {

components/input/public-api.ts

@@ -1,3 +1,4 @@
 export * from './nz-input-group.component';
 export * from './nz-input.module';
 export * from './nz-input-group.component';
+export * from './nz-input.directive';

components/popconfirm/nz-popconfirm.component.html

@@ -2,6 +2,7 @@
 <ng-template
   #overlay="cdkConnectedOverlay"
   cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayOrigin]="overlayOrigin"
   [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
   (backdropClick)="hide()"

components/popconfirm/nz-popconfirm.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 
 import { NzButtonModule } from '../button/nz-button.module';
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
@@ -13,7 +14,7 @@ import { NzPopconfirmDirective } from './nz-popconfirm.directive';
 @NgModule({
   declarations   : [ NzPopconfirmComponent, NzPopconfirmDirective ],
   exports        : [ NzPopconfirmComponent, NzPopconfirmDirective ],
-  imports        : [ CommonModule, NzButtonModule, OverlayModule, NzI18nModule, NzIconModule, NzAddOnModule ],
+  imports        : [ CommonModule, NzButtonModule, OverlayModule, NzI18nModule, NzIconModule, NzAddOnModule, NzOverlayModule ],
   entryComponents: [ NzPopconfirmComponent ]
 })
 

components/popover/nz-popover.component.html

@@ -2,6 +2,7 @@
 <ng-template
   #overlay="cdkConnectedOverlay"
   cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayOrigin]="overlayOrigin"
   [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
   (backdropClick)="hide()"

components/popover/nz-popover.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 
 import { NzPopoverComponent } from './nz-popover.component';
 import { NzPopoverDirective } from './nz-popover.directive';
@@ -11,7 +12,7 @@ import { NzPopoverDirective } from './nz-popover.directive';
   entryComponents: [ NzPopoverComponent ],
   exports        : [ NzPopoverDirective, NzPopoverComponent ],
   declarations   : [ NzPopoverDirective, NzPopoverComponent ],
-  imports        : [ CommonModule, OverlayModule, NzAddOnModule ]
+  imports        : [ CommonModule, OverlayModule, NzAddOnModule, NzOverlayModule ]
 })
 
 export class NzPopoverModule {

components/select/nz-select.component.html

@@ -18,7 +18,9 @@
   [class.ant-select-selection--multiple]="nzSelectService.isMultipleOrTags"
   (keydown)="onKeyDown($event)">
 </div>
-<ng-template cdkConnectedOverlay
+<ng-template
+  cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayHasBackdrop]="true"
   [cdkConnectedOverlayMinWidth]="nzDropdownMatchSelectWidth? null : triggerWidth"
   [cdkConnectedOverlayWidth]="nzDropdownMatchSelectWidth? triggerWidth : null"

components/select/nz-select.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzEmptyModule } from '../empty/nz-empty.module';
 import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzIconModule } from '../icon/nz-icon.module';
@@ -23,7 +24,8 @@ import { NzSelectComponent } from './nz-select.component';
     OverlayModule,
     NzIconModule,
     NzAddOnModule,
-    NzEmptyModule
+    NzEmptyModule,
+    NzOverlayModule
   ],
   declarations: [
     NzFilterGroupOptionPipe,