perf(all): improve rxjs imports (#29)

src/components/dropdown/nz-dropdown-button.component.ts

@@ -9,6 +9,7 @@ import {
   EventEmitter,
   AfterViewInit
 } from '@angular/core';
+import { debounceTime } from 'rxjs/operator/debounceTime';
 import { DropDownAnimation } from '../core/animation/dropdown-animations';
 import { NzDropDownDirective } from './nz-dropdown.directive';
 import { NzDropDownComponent } from './nz-dropdown.component';
@@ -74,7 +75,7 @@ export class NzDropDownButtonComponent extends NzDropDownComponent implements On
   @ViewChild(NzDropDownDirective) _nzOrigin;
 
   ngOnInit() {
-    this._$mouseSubject.debounceTime(300).subscribe((data: boolean) => {
+    debounceTime.call(this._$mouseSubject, 300).subscribe((data: boolean) => {
       if (this.nzDisable) {
         return;
       }

src/components/dropdown/nz-dropdown.component.ts

@@ -9,7 +9,8 @@ import {
   Output,
   EventEmitter, AfterViewInit
 } from '@angular/core';
-import { Subject } from 'rxjs/Rx';
+import { Subject } from 'rxjs/Subject';
+import { debounceTime } from 'rxjs/operator/debounceTime';
 import { NzMenuComponent } from '../menu/nz-menu.component';
 import { DropDownAnimation } from '../core/animation/dropdown-animations';
 import { NzDropDownDirective } from './nz-dropdown.directive';
@@ -120,7 +121,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnInit() {
-    this._$mouseSubject.debounceTime(300).subscribe((data: boolean) => {
+    debounceTime.call(this._$mouseSubject, 300).subscribe((data: boolean) => {
       this.nzVisible = data;
       if (this.nzVisible) {
         if (!this._triggerWidth) {

src/components/menu/nz-submenu.component.ts

@@ -4,7 +4,8 @@ import {
 } from '@angular/core';
 import { style, animate, state, transition, trigger } from '@angular/animations';
 import { NzMenuComponent } from './nz-menu.component';
-import { Subject } from 'rxjs/Rx';
+import { Subject } from 'rxjs/Subject';
+import { debounceTime } from 'rxjs/operator/debounceTime';
 
 @Component({
   selector  : '[nz-submenu]',
@@ -144,7 +145,7 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnInit() {
-    this._$mouseSubject.debounceTime(300).subscribe((data: boolean) => {
+    debounceTime.call(this._$mouseSubject, 300).subscribe((data: boolean) => {
       this.nzOpen = data;
     });
   }

src/components/modal/nz-modal-subject.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs/Rx';
+import { Subject } from 'rxjs/Subject';
 
 /* modal的事件枚举 */
 const enum modalEvent {

src/components/slider/nz-slider.component.ts

@@ -13,8 +13,17 @@ import {
   forwardRef,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { RxChain } from '@angular/cdk'
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { merge } from 'rxjs/observable/merge';
+import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
+import { _do as doOperator } from 'rxjs/operator/do';
+import { filter as filterOperator } from 'rxjs/operator/filter';
+import { map } from 'rxjs/operator/map';
+import { pluck } from 'rxjs/operator/pluck';
+import { takeUntil } from 'rxjs/operator/takeUntil';
 import { NzSliderService } from './nz-slider.service';
 import { Marks, MarksArray } from './nz-slider-marks.component';
 
@@ -365,32 +374,32 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
     [ mouse, touch ].forEach(source => {
       const { start, move, end, pluckKey, filter = () => true } = source;
       // start
-      source.startPlucked$ = Observable
-        .fromEvent(sliderDOM, start)
-        .filter(<any>filter)
-        .do(this.utils.pauseEvent)
-        .pluck(...pluckKey)
-        .map((position: number) => this.findClosestValue(position));
+      source.startPlucked$ = (RxChain.from(fromEvent(sliderDOM, start)) as RxChain<any>)
+        .call(filterOperator, filter)
+        .call(doOperator, this.utils.pauseEvent)
+        .call(pluck, ...pluckKey)
+        .call(map, (position: number) => this.findClosestValue(position))
+        .result();
       // end
-      source.end$ = Observable.fromEvent(document, end);
+      source.end$ = fromEvent(document, end);
       // resolve move
-      source.moveResolved$ = Observable
-        .fromEvent(document, move)
-        .filter(<any>filter)
-        .do(this.utils.pauseEvent)
-        .pluck(...pluckKey)
-        .distinctUntilChanged()
-        .map((position: number) => this.findClosestValue(position))
-        .distinctUntilChanged()
-        .takeUntil(source.end$);
+      source.moveResolved$ = (RxChain.from(fromEvent(document, move)) as RxChain<any>)
+        .call(filterOperator, filter)
+        .call(doOperator, this.utils.pauseEvent)
+        .call(pluck, ...pluckKey)
+        .call(distinctUntilChanged)
+        .call(map, (position: number) => this.findClosestValue(position))
+        .call(distinctUntilChanged)
+        .call(takeUntil, source.end$)
+        .result();
       // merge to become moving
       // source.move$ = source.startPlucked$.mergeMapTo(source.moveResolved$);
     });
     // merge mouse and touch observables
-    this.dragstart$ = Observable.merge(mouse.startPlucked$, touch.startPlucked$);
+    this.dragstart$ = merge(mouse.startPlucked$, touch.startPlucked$);
     // this.dragmove$ = Observable.merge(mouse.move$, touch.move$);
-    this.dragmove$ = Observable.merge(mouse.moveResolved$, touch.moveResolved$);
-    this.dragend$ = Observable.merge(mouse.end$, touch.end$);
+    this.dragmove$ = merge(mouse.moveResolved$, touch.moveResolved$);
+    this.dragend$ = merge(mouse.end$, touch.end$);
   }
 
   subscribeDrag(periods = [ 'start', 'move', 'end' ]) {

src/showcase/nz-demo-form/nz-demo-form-validate-dynamic.component.ts

@@ -6,7 +6,7 @@ import {
   FormControl,
   Validators
 } from '@angular/forms';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'nz-demo-form-validate-dynamic',

src/showcase/nz-demo-select/nz-demo-select-multiple-change.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Jsonp, Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'nz-demo-select-multiple-change',

src/showcase/nz-demo-select/nz-demo-select-search-change.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Jsonp, Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'nz-demo-select-search-change',

src/showcase/nz-demo-table/randomUser.service.ts

@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+
 @Injectable()
 export class RandomUserService {
   randomUserUrl = 'https://api.randomuser.me/';