chore: rename files

components/modal/demo/async.ts

@@ -6,15 +6,15 @@ import { Component } from '@angular/core';
     <button nz-button nzType="primary" (click)="showModal()">
       <span>Show Modal</span>
     </button>
-    <nz-modal2
+    <nz-modal
       [(nzVisible)]="isVisible"
       nzTitle="Modal Title"
       (nzOnCancel)="handleCancel()"
       (nzOnOk)="handleOk()"
       [nzOkLoading]="isOkLoading"
     >
       <p>Modal Content</p>
-    </nz-modal2>
+    </nz-modal>
   `
 })
 export class NzDemoModalAsyncComponent {

components/modal/demo/basic.ts

@@ -4,12 +4,12 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-modal-basic',
   template: `
     <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
-    <nz-modal2 [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+    <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
       <p>Content one</p>
       <p>Content two</p>
       <p>Content three</p>
       <p>Content three</p>
-    </nz-modal2>
+    </nz-modal>
   `
 })
 export class NzDemoModalBasicComponent {

components/modal/demo/confirm-promise.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm-promise',
@@ -8,9 +8,9 @@ import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
   `
 })
 export class NzDemoModalConfirmPromiseComponent {
-  confirmModal: NzModalRef2; // For testing by now
+  confirmModal: NzModalRef; // For testing by now
 
-  constructor(private modal: NzModal) {}
+  constructor(private modal: NzModalService) {}
 
   showConfirm(): void {
     this.confirmModal = this.modal.confirm({

components/modal/demo/confirm.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModal } from 'ng-zorro-antd/modal';
+import { NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm',
@@ -16,7 +16,7 @@ import { NzModal } from 'ng-zorro-antd/modal';
   ]
 })
 export class NzDemoModalConfirmComponent {
-  constructor(private modal: NzModal) {}
+  constructor(private modal: NzModalService) {}
 
   showConfirm(): void {
     this.modal.confirm({

components/modal/demo/footer.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
     <button nz-button nzType="primary" (click)="showModal()">
       <span>Show Modal</span>
     </button>
-    <nz-modal2
+    <nz-modal
       [(nzVisible)]="isVisible"
       [nzTitle]="modalTitle"
       [nzContent]="modalContent"
@@ -30,7 +30,7 @@ import { Component } from '@angular/core';
         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
       </ng-template>
-    </nz-modal2>
+    </nz-modal>
   `
 })
 export class NzDemoModalFooterComponent {

components/modal/demo/footer2.ts

@@ -1,7 +1,7 @@
 /* entryComponents: NzModalCustomFooterComponent */
 
 import { Component } from '@angular/core';
-import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-footer2',
@@ -14,7 +14,7 @@ import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
     <button nz-button nzType="primary" (click)="showModal2()">
       <span>In Component</span>
     </button>
-    <nz-modal2 [(nzVisible)]="isVisible" nzTitle="Custom Modal Title" (nzOnCancel)="handleCancel()">
+    <nz-modal [(nzVisible)]="isVisible" nzTitle="Custom Modal Title" (nzOnCancel)="handleCancel()">
       <div>
         <p>Modal Content</p>
         <p>Modal Content</p>
@@ -27,15 +27,15 @@ import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
       </div>
-    </nz-modal2>
+    </nz-modal>
   `,
   styles: []
 })
 export class NzDemoModalFooter2Component {
   isVisible = false;
   isConfirmLoading = false;
 
-  constructor(private modalService: NzModal) {}
+  constructor(private modalService: NzModalService) {}
 
   showModal1(): void {
     this.isVisible = true;
@@ -78,7 +78,7 @@ export class NzDemoModalFooter2Component {
   `
 })
 export class NzModalCustomFooterComponent {
-  constructor(private modal: NzModalRef2) {}
+  constructor(private modal: NzModalRef) {}
 
   destroyModal(): void {
     this.modal.destroy();

components/modal/demo/info.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModal } from 'ng-zorro-antd/modal';
+import { NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-info',
@@ -18,7 +18,7 @@ import { NzModal } from 'ng-zorro-antd/modal';
   ]
 })
 export class NzDemoModalInfoComponent {
-  constructor(private modal: NzModal) {}
+  constructor(private modal: NzModalService) {}
 
   info(): void {
     this.modal.info({

components/modal/demo/locale.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModal } from 'ng-zorro-antd/modal';
+import { NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-locale',
@@ -26,7 +26,7 @@ import { NzModal } from 'ng-zorro-antd/modal';
 export class NzDemoModalLocaleComponent {
   isVisible = false;
 
-  constructor(private modalService: NzModal) {}
+  constructor(private modalService: NzModalService) {}
 
   showModal(): void {
     this.isVisible = true;

components/modal/demo/position.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-modal-position',
   template: `
     <button nz-button nzType="primary" (click)="showModalTop()">Display a modal dialog at 20px to Top</button>
-    <nz-modal2
+    <nz-modal
       [nzStyle]="{ top: '20px' }"
       [(nzVisible)]="isVisibleTop"
       nzTitle="20px to Top"
@@ -14,12 +14,12 @@ import { Component } from '@angular/core';
       <p>some contents...</p>
       <p>some contents...</p>
       <p>some contents...</p>
-    </nz-modal2>
+    </nz-modal>
 
     <br /><br />
 
     <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
-    <nz-modal2
+    <nz-modal
       nzWrapClassName="vertical-center-modal"
       [(nzVisible)]="isVisibleMiddle"
       nzTitle="Vertically centered modal dialog"
@@ -29,7 +29,7 @@ import { Component } from '@angular/core';
       <p>some contents...</p>
       <p>some contents...</p>
       <p>some contents...</p>
-    </nz-modal2>
+    </nz-modal>
   `,
   styles: [
     `

components/modal/demo/service.ts

@@ -1,7 +1,7 @@
-/* entryComponents: NzModalCustomComponent,NzModalCustomComponent */
+/* entryComponents: NzModalCustomComponent */
 
 import { Component, Input, TemplateRef } from '@angular/core';
-import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-service',
@@ -35,9 +35,6 @@ import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
       <span>Use Component</span>
     </button>
 
-    <button nz-button nzType="primary" (click)="createComponentModal2()">
-      <span>Use Component2</span>
-    </button>
     <button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>
 
     <br /><br />
@@ -56,12 +53,12 @@ import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
   ]
 })
 export class NzDemoModalServiceComponent {
-  tplModal: NzModalRef2;
+  tplModal: NzModalRef;
   tplModalButtonLoading = false;
   htmlModalVisible = false;
   disabled = false;
 
-  constructor(private modal: NzModal) {}
+  constructor(private modal: NzModalService) {}
 
   createModal(): void {
     this.modal.create({
@@ -91,29 +88,6 @@ export class NzDemoModalServiceComponent {
     }, 1000);
   }
 
-  createComponentModal2(): void {
-    const modalRef = this.modal.create({
-      nzContent: NzModalCustom2Component,
-      nzTitle: 'Title',
-      nzMaskStyle: {
-        color: 'red'
-      },
-      nzStyle: {
-        color: 'red'
-      },
-      nzClassName: 'my-class-name',
-      nzWrapClassName: 'my-wrap-class-name',
-      nzZIndex: 1100,
-      nzComponentParams: {
-        title: 'title',
-        subtitle: 'subtitle'
-      },
-      nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
-    });
-    modalRef.afterOpen.subscribe(console.log);
-    modalRef.afterClose.subscribe(console.log);
-  }
-
   createComponentModal(): void {
     const modal = this.modal.create({
       nzTitle: 'Modal Title',
@@ -133,27 +107,25 @@ export class NzDemoModalServiceComponent {
         }
       ]
     });
-
+    const instance = modal.getContentComponent();
     modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
-
     // Return a result when closed
     modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
 
     // delay until modal instance created
     setTimeout(() => {
-      const instance = modal.getContentComponent();
       instance.subtitle = 'sub title is changed';
     }, 2000);
   }
 
   createCustomButtonModal(): void {
-    const modal: NzModalRef2 = this.modal.create({
+    const modal: NzModalRef = this.modal.create({
       nzTitle: 'custom button demo',
       nzContent: 'pass array of button config to nzFooter to create multiple buttons',
       nzFooter: [
         {
           label: 'Close',
-          shape: 'default',
+          shape: 'round',
           onClick: () => modal.destroy()
         },
         {
@@ -222,32 +194,7 @@ export class NzModalCustomComponent {
   @Input() title: string;
   @Input() subtitle: string;
 
-  constructor(private modal: NzModalRef2) {}
-
-  destroyModal(): void {
-    this.modal.destroy({ data: 'this the result data' });
-  }
-}
-
-@Component({
-  selector: 'nz-modal-custom-component',
-  template: `
-    <h2>{{ title }}</h2>
-    <h4>{{ subtitle }}</h4>
-    Content
-    <br />
-    Content
-    <br />
-    Content...
-  `
-})
-export class NzModalCustom2Component {
-  @Input() title: string;
-  @Input() subtitle: string;
-
-  constructor(private modal: NzModalRef2) {
-    console.log(modal);
-  }
+  constructor(private modal: NzModalRef) {}
 
   destroyModal(): void {
     this.modal.destroy({ data: 'this the result data' });

components/modal/modal-close.component.ts

@@ -8,7 +8,7 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { ModalConfig } from './nz-modal.type';
+import { ModalOptions } from './modal-types';
 
 @Component({
   selector: 'button[nz-modal-close]',
@@ -27,5 +27,5 @@ import { ModalConfig } from './nz-modal.type';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NzModalCloseComponent {
-  constructor(public config: ModalConfig) {}
+  constructor(public config: ModalOptions) {}
 }

components/modal/modal-confirm-container.component.ts

@@ -24,15 +24,16 @@ import {
   Renderer2,
   ViewChild
 } from '@angular/core';
+import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { nzModalAnimations } from './modal-animations';
-import { NzModalContainerComponent } from './modal-container.component';
-import { ModalConfig } from './nz-modal.type';
+import { BaseModalContainer } from './modal-container';
+import { ModalOptions } from './modal-types';
 
 @Component({
   selector: 'nz-modal-confirm-container',
@@ -44,7 +45,7 @@ import { ModalConfig } from './nz-modal.type';
       class="ant-modal"
       [class]="config.nzClassName"
       [ngStyle]="config.nzStyle"
-      [style.width]="config.nzWidth | nzToCssUnit"
+      [style.width]="config?.nzWidth | nzToCssUnit"
     >
       <div class="ant-modal-content">
         <button *ngIf="config.nzClosable" nz-modal-close (click)="onCloseClick()"></button>
@@ -107,7 +108,7 @@ import { ModalConfig } from './nz-modal.type';
     '(mouseup)': 'onMouseup($event)'
   }
 })
-export class NzModalConfirmContainerComponent extends NzModalContainerComponent implements OnDestroy {
+export class NzModalConfirmContainerComponent extends BaseModalContainer implements OnDestroy {
   @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet: CdkPortalOutlet;
   @ViewChild('modalElement', { static: true }) modalElementRef: ElementRef<HTMLDivElement>;
   @Output() readonly cancelTriggered = new EventEmitter<void>();
@@ -123,11 +124,12 @@ export class NzModalConfirmContainerComponent extends NzModalContainerComponent
     render: Renderer2,
     zone: NgZone,
     overlayRef: OverlayRef,
-    public config: ModalConfig,
+    public config: ModalOptions,
     // tslint:disable-next-line:no-any
-    @Optional() @Inject(DOCUMENT) document: any
+    @Optional() @Inject(DOCUMENT) document: any,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
   ) {
-    super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document);
+    super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType);
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.locale = this.i18n.getLocaleData('Modal');
     });