refactor(module:modal): refactor the modal component

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-modal
+    <nz-modal2
       [(nzVisible)]="isVisible"
       nzTitle="Modal Title"
       (nzOnCancel)="handleCancel()"
       (nzOnOk)="handleOk()"
       [nzOkLoading]="isOkLoading"
     >
       <p>Modal Content</p>
-    </nz-modal>
+    </nz-modal2>
   `
 })
 export class NzDemoModalAsyncComponent {

components/modal/demo/basic.ts

@@ -4,11 +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-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+    <nz-modal2 [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
       <p>Content one</p>
       <p>Content two</p>
       <p>Content three</p>
-    </nz-modal>
+      <p>Content three</p>
+    </nz-modal2>
   `
 })
 export class NzDemoModalBasicComponent {

components/modal/demo/confirm-promise.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModal, NzModalRef, NzModalRef2, NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm-promise',

components/modal/demo/confirm.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModal, NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm',
@@ -16,7 +16,7 @@ import { NzModal, NzModalService } from 'ng-zorro-antd/modal';
   ]
 })
 export class NzDemoModalConfirmComponent {
-  constructor(private modalService: NzModalService, private modal: NzModal) {}
+  constructor(private modal: NzModal) {}
 
   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-modal
+    <nz-modal2
       [(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-modal>
+    </nz-modal2>
   `
 })
 export class NzDemoModalFooterComponent {

components/modal/demo/footer2.ts

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

components/modal/demo/info.ts

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

components/modal/demo/locale.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModal, NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-locale',

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-modal
+    <nz-modal2
       [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-modal>
+    </nz-modal2>
 
     <br /><br />
 
     <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
-    <nz-modal
+    <nz-modal2
       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-modal>
+    </nz-modal2>
   `,
   styles: [
     `

components/modal/demo/service.ts

@@ -1,7 +1,7 @@
 /* entryComponents: NzModalCustomComponent,NzModalCustomComponent */
 
 import { Component, Input, TemplateRef } from '@angular/core';
-import { NzModal, NzModalRef, NzModalRef2, NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal, NzModalRef2 } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-service',
@@ -61,7 +61,7 @@ export class NzDemoModalServiceComponent {
   htmlModalVisible = false;
   disabled = false;
 
-  constructor(private modalService: NzModalService, private modal: NzModal) {}
+  constructor(private modal: NzModal) {}
 
   createModal(): void {
     this.modal.create({
@@ -92,7 +92,8 @@ export class NzDemoModalServiceComponent {
   }
 
   createComponentModal2(): void {
-    const modalRef = this.modal.open<NzModalCustom2Component>(NzModalCustom2Component, {
+    const modalRef = this.modal.create({
+      nzContent: NzModalCustom2Component,
       nzTitle: 'Title',
       nzMaskStyle: {
         color: 'red'
@@ -146,7 +147,7 @@ export class NzDemoModalServiceComponent {
   }
 
   createCustomButtonModal(): void {
-    const modal: NzModalRef = this.modal.create({
+    const modal: NzModalRef2 = this.modal.create({
       nzTitle: 'custom button demo',
       nzContent: 'pass array of button config to nzFooter to create multiple buttons',
       nzFooter: [
@@ -158,7 +159,7 @@ export class NzDemoModalServiceComponent {
         {
           label: 'Confirm',
           type: 'primary',
-          onClick: () => this.modalService.confirm({ nzTitle: 'Confirm Modal Title', nzContent: 'Confirm Modal Content' })
+          onClick: () => this.modal.confirm({ nzTitle: 'Confirm Modal Title', nzContent: 'Confirm Modal Content' })
         },
         {
           label: 'Change Button Status',
@@ -249,6 +250,6 @@ export class NzModalCustom2Component {
   }
 
   destroyModal(): void {
-    // this.modal.destroy({ data: 'this the result data' });
+    this.modal.destroy({ data: 'this the result data' });
   }
 }

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

@@ -38,7 +38,14 @@ import { ModalConfig } from './nz-modal.type';
   selector: 'nz-modal-confirm-container',
   exportAs: 'nzModalConfirmContainer',
   template: `
-    <div #modalElement role="document" class="ant-modal" [class]="config.nzClassName" [ngStyle]="config.nzStyle" [style.width]="width">
+    <div
+      #modalElement
+      role="document"
+      class="ant-modal"
+      [class]="config.nzClassName"
+      [ngStyle]="config.nzStyle"
+      [style.width]="config.nzWidth | nzToCssUnit"
+    >
       <div class="ant-modal-content">
         <button *ngIf="config.nzClosable" nz-modal-close (click)="onCloseClick()"></button>
         <div class="ant-modal-body" [ngStyle]="config.nzBodyStyle">

components/modal/modal-container.component.ts

@@ -54,7 +54,14 @@ const FADE_CLASS_NAME_MAP = {
   selector: 'nz-modal-container',
   exportAs: 'nzModalContainer',
   template: `
-    <div #modalElement role="document" class="ant-modal" [class]="config.nzClassName" [ngStyle]="config.nzStyle" [style.width]="width">
+    <div
+      #modalElement
+      role="document"
+      class="ant-modal"
+      [class]="config.nzClassName"
+      [ngStyle]="config.nzStyle"
+      [style.width]="config.nzWidth | nzToCssUnit"
+    >
       <div class="ant-modal-content">
         <button *ngIf="config.nzClosable" nz-modal-close (click)="onCloseClick()"></button>
         <div *ngIf="config.nzTitle" nz-modal-title></div>
@@ -87,7 +94,6 @@ const FADE_CLASS_NAME_MAP = {
 export class NzModalContainerComponent extends BasePortalOutlet {
   @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet: CdkPortalOutlet;
   @ViewChild('modalElement', { static: true }) modalElementRef: ElementRef<HTMLDivElement>;
-  width = '520px';
 
   animationStateChanged = new EventEmitter<AnimationEvent>();
   containerClick = new EventEmitter<void>();
@@ -119,6 +125,7 @@ export class NzModalContainerComponent extends BasePortalOutlet {
     this.document = document;
     this.isStringContent = typeof config.nzContent === 'string';
     this.setContainer();
+    console.log(config);
   }
 
   onMousedown(e: MouseEvent): void {
@@ -157,6 +164,10 @@ export class NzModalContainerComponent extends BasePortalOutlet {
     return this.portalOutlet.attachTemplatePortal(portal);
   }
 
+  getNativeElement(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
+
   private setModalTransformOrigin(): void {
     const modalElement = this.modalElementRef.nativeElement;
     if (this.elementFocusedBeforeModalWasOpened as HTMLElement) {

components/modal/modal-legacy-api.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Observable } from 'rxjs';
+
+export abstract class NzModalLegacyAPI<T, R> {
+  abstract afterOpen: Observable<void>;
+  abstract afterClose: Observable<R>;
+
+  abstract open(): void;
+  abstract close(result?: R): void;
+  abstract destroy(result?: R): void;
+
+  /**
+   * Trigger the nzOnOk/nzOnCancel by manual
+   */
+  abstract triggerOk(): void;
+  abstract triggerCancel(): void;
+  /**
+   * Return the component instance of nzContent when specify nzContent as a Component
+   */
+  abstract getContentComponent(): T | void;
+
+  /**
+   * Get the dom element of this Modal
+   */
+  abstract getElement(): HTMLElement | void;
+}