refactor(module:carousel): refactor (NG-ZORRO#3062)

* refactor(module:carousel): refactor

* fix: move some listeners to body

* fix: fix vertical context preparing dragging from first to last

* fix: opacity strategy transition

* fix(module:breadcrumb): add input boolean

* feat: support SSR

* fix: lint

* fix: fix active index not reset when content changes
close NG-ZORRO#2468, close NG-ZORRO#2218

angular.json

@@ -30,9 +30,6 @@
             "styles": [
               "site/doc/styles.less"
             ],
-            "scripts": [
-              "node_modules/hammerjs/hammer.min.js"
-            ],
             "es5BrowserSupport": true
           },
           "configurations": {

components/breadcrumb/nz-breadcrumb.component.ts

@@ -16,6 +16,8 @@ import { ActivatedRoute, Params, PRIMARY_OUTLET, Router } from '@angular/router'
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { InputBoolean } from '../core/util';
+
 export const NZ_ROUTE_DATA_BREADCRUMB = 'breadcrumb';
 
 export interface BreadcrumbOption {
@@ -39,7 +41,7 @@ export interface BreadcrumbOption {
   ]
 })
 export class NzBreadCrumbComponent implements OnInit, OnDestroy {
-  @Input() nzAutoGenerate = false;
+  @Input() @InputBoolean() nzAutoGenerate = false;
   @Input() nzSeparator: string | TemplateRef<void> = '/';
 
   breadcrumbs: BreadcrumbOption[] | undefined = [];

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

@@ -26,7 +26,7 @@ A carousel component. Scales with its container.
 | `[nzVertical]` | Whether to use a vertical display | `boolean` | `false` |
 | `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter<number>` | - |
 | `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | - |
-| `[nzEnableSwipe]` | Whether to support swipe gesture (would work if only you import hammer.js in your project)  | `boolean` | `true` |
+| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` |
 
 #### Methods
 

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

@@ -27,7 +27,7 @@ subtitle: 走马灯
 | `[nzVertical]` | 垂直显示 | `boolean` | `false` |
 | `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` | - |
 | `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - |
-| `[nzEnableSwipe]` | 是否支持手势划动切换，仅在自行引入 hammer.js 的情形下生效 | `boolean` | `true` |
+| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` |
 #### 方法
 
 | 名称 | 描述 |

components/carousel/nz-carousel-content.directive.ts

@@ -1,57 +1,13 @@
-import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
-
-import { isNotNil } from '../core/util/check';
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
 
 @Directive({
   selector: '[nz-carousel-content]'
 })
-export class NzCarouselContentDirective implements OnInit {
+export class NzCarouselContentDirective {
   el: HTMLElement = this.elementRef.nativeElement;
 
-  private _active = false;
-  private _width: number = 0;
-  private _left: number | null;
-  private _top: number | null;
-  private _fadeMode = false;
-
-  set width(value: number) {
-    this._width = value;
-    this.renderer.setStyle(this.el, 'width', `${this.width}px`);
-  }
-
-  get width(): number {
-    return this._width;
-  }
-
-  set left(value: number | null) {
-    this._left = value;
-    if (isNotNil(this.left)) {
-      this.renderer.setStyle(this.el, 'left', `${this.left}px`);
-    } else {
-      this.renderer.removeStyle(this.el, 'left');
-    }
-  }
-
-  get left(): number | null {
-    return this._left;
-  }
-
-  set top(value: number | null) {
-    this._top = value;
-    if (isNotNil(this.top)) {
-      this.renderer.setStyle(this.el, 'top', `${this.top}px`);
-    } else {
-      this.renderer.removeStyle(this.el, 'top');
-    }
-  }
-
-  get top(): number | null {
-    return this._top;
-  }
-
   set isActive(value: boolean) {
     this._active = value;
-    this.updateOpacity();
     if (this.isActive) {
       this.renderer.addClass(this.el, 'slick-active');
     } else {
@@ -63,31 +19,9 @@ export class NzCarouselContentDirective implements OnInit {
     return this._active;
   }
 
-  set fadeMode(value: boolean) {
-    this._fadeMode = value;
-    if (this.fadeMode) {
-      this.renderer.setStyle(this.el, 'position', 'relative');
-    } else {
-      this.renderer.removeStyle(this.el, 'position');
-    }
-    this.updateOpacity();
-  }
-
-  get fadeMode(): boolean {
-    return this._fadeMode;
-  }
+  private _active = false;
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
     renderer.addClass(elementRef.nativeElement, 'slick-slide');
   }
-
-  ngOnInit(): void {
-    this.renderer.setStyle(this.el, 'transition', 'opacity 500ms ease');
-  }
-
-  private updateOpacity(): void {
-    if (this.fadeMode) {
-      this.renderer.setStyle(this.el, 'opacity', this.isActive ? 1 : 0);
-    }
-  }
 }

components/carousel/nz-carousel-definitions.ts

@@ -0,0 +1,24 @@
+import { QueryList } from '@angular/core';
+import { NzCarouselContentDirective } from './nz-carousel-content.directive';
+
+export type NzCarouselEffects = 'fade' | 'scrollx';
+
+export interface NzCarouselComponentAsSource {
+  carouselContents: QueryList<NzCarouselContentDirective>;
+  el: HTMLElement;
+  nzTransitionSpeed: number;
+  nzVertical: boolean;
+  slickListEl: HTMLElement;
+  slickTrackEl: HTMLElement;
+  activeIndex: number;
+}
+
+export interface PointerVector {
+  x: number;
+  y: number;
+}
+
+export interface FromToInterface {
+  from: number;
+  to: number;
+}

components/carousel/nz-carousel.component.html

@@ -1,23 +1,30 @@
 <div class="slick-initialized slick-slider" [class.slick-vertical]="nzVertical">
   <div
-    class="slick-list"
     #slickList
+    class="slick-list"
     tabindex="-1"
     (keydown)="onKeyDown($event)"
-    (swipeleft)="swipe('swipeleft')"
-    (swiperight)="swipe('swiperight')"
-    (pan)="swipeInProgress($event);">
+    (mousedown)="pointerDown($event)"
+    (touchstart)="pointerDown($event)"
+  >
+    <!-- Render carousel items. -->
     <div class="slick-track" #slickTrack>
       <ng-content></ng-content>
     </div>
   </div>
+  <!-- Render dots. -->
   <ul class="slick-dots" *ngIf="nzDots">
-    <li *ngFor="let content of slideContents; let i = index" [class.slick-active]="content.isActive" (click)="goTo(i)">
-      <ng-template [ngTemplateOutlet]="nzDotRender || renderDotTemplate" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
+    <li
+      *ngFor="let content of carouselContents; let i = index"
+      [class.slick-active]="content.isActive"
+      (click)="goTo(i)"
+    >
+      <ng-template [ngTemplateOutlet]="nzDotRender || renderDotTemplate" [ngTemplateOutletContext]="{ $implicit: i }">
+      </ng-template>
     </li>
   </ul>
 </div>
 
 <ng-template #renderDotTemplate let-index>
-  <button>{{index + 1}}</button>
+  <button>{{ index + 1 }}</button>
 </ng-template>