refactor(module:modal): refactor of modal with more flexible and ease…

…-of-use.

close NG-ZORRO#317, close NG-ZORRO#644

components/index.ts

@@ -23,6 +23,7 @@ import { NzListModule } from './list';
 import { NzLocaleModule } from './locale';
 import { NzMenuModule } from './menu';
 import { NzMessageModule } from './message/nz-message.module';
+import { NzModalModule } from './modal/nz-modal.module';
 import { NzNotificationModule } from './notification/nz-notification.module';
 import { NzPaginationModule } from './pagination/nz-pagination.module';
 import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
@@ -42,6 +43,16 @@ import { NzTimelineModule } from './timeline/nz-timeline.module';
 import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
 
+import { NzMessageService } from './message/nz-message.service';
+import { NzNotificationService } from './notification/nz-notification.service';
+
+export { NzNotificationService } from './notification/nz-notification.service';
+export { NzMessageService } from './message/nz-message.service';
+
+// Tokens (eg. global services' config)
+export { NZ_MESSAGE_CONFIG } from './message/nz-message-config';
+export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
+
 export * from './button';
 export * from './grid';
 export * from './layout';
@@ -52,16 +63,7 @@ export * from './input';
 export * from './i18n';
 export * from './locale/index';
 export * from './list/index';
-
-import { NzMessageService } from './message/nz-message.service';
-import { NzNotificationService } from './notification/nz-notification.service';
-
-export { NzNotificationService } from './notification/nz-notification.service';
-export { NzMessageService } from './message/nz-message.service';
-
-// Tokens (eg. global services' config)
-export { NZ_MESSAGE_CONFIG } from './message/nz-message-config';
-export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
+export * from './modal/public-api';
 
 @NgModule({
   exports: [
@@ -106,7 +108,8 @@ export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
     NzDividerModule,
     NzFormModule,
     NzListModule,
-    NzI18nModule
+    NzI18nModule,
+    NzModalModule
   ]
 })
 export class NgZorroAntdModule {

components/modal/css-unit.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'toCssUnit'
+})
+
+export class CssUnitPipe implements PipeTransform {
+  transform(value: number | string, defaultUnit: string = 'px'): string {
+    const formatted = +value; // force convert
+    return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
+  }
+}

components/modal/demo/async.md

@@ -0,0 +1,15 @@
+---
+order: 1
+title:
+  zh-CN: 异步关闭
+  en-US: Asynchronously close
+---
+
+## zh-CN
+
+点击确定后异步关闭对话框，例如提交表单。
+
+## en-US
+
+Asynchronously close a modal dialog when a user clicked OK button, for example,
+you can use this pattern when you submit a form.

components/modal/demo/async.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-modal-async',
+  template: `
+    <button nz-button nzType="primary" (click)="showModal()">
+      <span>显示对话框</span>
+    </button>
+    <nz-modal [(nzVisible)]="isVisible" nzTitle="对话框标题" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)" [nzOkLoading]="isOkLoading">
+      <p>对话框的内容</p>
+    </nz-modal>
+  `,
+  styles: []
+})
+export class NzDemoModalAsyncComponent {
+  isVisible = false;
+  isOkLoading = false;
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk($event: MouseEvent): void {
+    this.isOkLoading = true;
+    window.setTimeout(() => {
+      this.isVisible = false;
+      this.isOkLoading = false;
+    }, 3000);
+  }
+
+  handleCancel($event: MouseEvent): void {
+    this.isVisible = false;
+  }
+}

components/modal/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+第一个对话框。
+
+## en-US
+
+Basic modal.

components/modal/demo/basic.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+@Component({
+  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($event)" (nzOnOk)="handleOk($event)">
+      <p>Content one</p>
+      <p>Content two</p>
+      <p>Content three</p>
+    </nz-modal>
+  `,
+  styles: []
+})
+export class NzDemoModalBasicComponent {
+  isVisible = false;
+
+  constructor() {}
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk($event: MouseEvent): void {
+    console.log('Button ok clicked!');
+    this.isVisible = false;
+  }
+
+  handleCancel($event: MouseEvent): void {
+    console.log('Button cancel clicked!', $event);
+    this.isVisible = false;
+  }
+}

components/modal/demo/confirm-promise.md

@@ -0,0 +1,15 @@
+---
+order: 5
+title:
+  zh-CN: 确认对话框
+  en-US: Confirmation modal dialog
+---
+
+## zh-CN
+
+使用 `NzModalService.confirm()` 可以快捷地弹出确认框。NzOnCancel/NzOnOk 返回 promise 可以延迟关闭
+
+## en-US
+
+To use `NzModalService.confirm()` to popup confirmation modal dialog. Let NzOnCancel/NzOnOk function return a promise object to
+delay closing the dialog.

components/modal/demo/confirm-promise.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ModalPublicAgent, NzModalService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-modal-confirm-promise',
+  template: `
+    <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
+  `,
+  styles  : []
+})
+export class NzDemoModalConfirmPromiseComponent {
+  confirmModal: ModalPublicAgent; // For testing by now
+
+  constructor(private modal: NzModalService) { }
+
+  showConfirm(): void {
+    this.confirmModal = this.modal.confirm({
+      nzTitle: 'Do you Want to delete these items?',
+      nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
+      nzOnOk: () => new Promise((resolve, reject) => {
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+      }).catch(() => console.log('Oops errors!'))
+    });
+  }
+}

components/modal/demo/confirm.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 确认对话框
+  en-US: Confirmation modal dialog
+---
+
+## zh-CN
+
+使用 `NzModalService.confirm()` 可以快捷地弹出确认框。
+
+## en-US
+
+To use `NzModalService.confirm()` to popup a confirmation modal dialog.

components/modal/demo/confirm.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-modal-confirm',
+  template: `
+    <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
+    <button nz-button nzType="dashed" (click)="showDeleteConfirm()">Delete</button>
+  `,
+  styles  : []
+})
+export class NzDemoModalConfirmComponent {
+  constructor(private modalService: NzModalService) { }
+
+  showConfirm(): void {
+    this.modalService.confirm({
+      nzTitle: '<i>Do you Want to delete these items?</i>',
+      nzContent: '<b>Some descriptions</b>',
+      nzOnOk: () => console.log('OK')
+    });
+  }
+
+  showDeleteConfirm(): void {
+    this.modalService.confirm({
+      nzTitle: 'Are you sure delete this task?',
+      nzContent: '<b style="color: red;">Some descriptions</b>',
+      nzOkText: 'Yes',
+      nzOkType: 'danger',
+      nzOnOk: () => console.log('OK'),
+      nzCancelText: 'No',
+      nzOnCancel: () => console.log('Cancel')
+    });
+  }
+}

components/modal/demo/footer.md

@@ -0,0 +1,20 @@
+---
+order: 2
+title:
+  zh-CN: 自定义页脚
+  en-US: Customized Footer
+---
+
+## zh-CN
+
+更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。
+
+不需要默认确定取消按钮时，你可以把 `nzFooter` 设为 `null`。
+
+## en-US
+
+A more complex example which define a customized footer button bar,
+the dialog will change to loading state after clicking submit button, when the loading is over,
+the modal dialog will be closed.
+
+You could set `nzFooter` to `null` if you don't need default footer buttons.

components/modal/demo/footer.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'nz-demo-modal-footer',
+  template: `
+    <button nz-button nzType="primary" (click)="showModal()">
+      <span>显示对话框</span>
+    </button>
+    <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
+      <ng-template #modalTitle>
+        自定义对话框标题
+      </ng-template>
+
+      <ng-template #modalContent>
+        <p>对话框的内容</p>
+        <p>对话框的内容</p>
+        <p>对话框的内容</p>
+        <p>对话框的内容</p>
+        <p>对话框的内容</p>
+      </ng-template>
+
+      <ng-template #modalFooter>
+        <span>自定义底部: </span>
+        <button nz-button nzType="default" (click)="handleCancel($event)">自定义返回</button>
+        <button nz-button nzType="primary" (click)="handleOk($event)" [nzLoading]="isConfirmLoading">自定义提交</button>
+      </ng-template>
+    </nz-modal>
+  `,
+  styles: []
+})
+export class NzDemoModalFooterComponent {
+  isVisible = false;
+  isConfirmLoading = false;
+
+  constructor() { }
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk($event: MouseEvent): void {
+    this.isConfirmLoading = true;
+    setTimeout(() => {
+      this.isVisible = false;
+      this.isConfirmLoading = false;
+    }, 3000);
+  }
+
+  handleCancel($event: MouseEvent): void {
+    this.isVisible = false;
+  }
+}

components/modal/demo/info.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 信息提示
+  en-US: Information modal dialog
+---
+
+## zh-CN
+
+各种类型的信息提示，只提供一个按钮用于关闭。
+
+## en-US
+
+In the various types of information modal dialog, only one button to close dialog is provided.

components/modal/demo/info.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-modal-info',
+  template: `
+    <button nz-button (click)="info()">Info</button>
+    <button nz-button (click)="success()">Success</button>
+    <button nz-button (click)="error()">Error</button>
+    <button nz-button (click)="warning()">Warning</button>
+  `,
+  styles: []
+})
+export class NzDemoModalInfoComponent {
+  constructor(private modalService: NzModalService) { }
+
+  info(): void {
+    this.modalService.info({
+      nzTitle: 'This is a notification message',
+      nzContent: '<p>some messages...some messages...</p><p>some messages...some messages...</p>',
+      nzOnOk: () => console.log('Info OK')
+    });
+  }
+
+  success(): void {
+    this.modalService.success({
+      nzTitle: 'This is a success message',
+      nzContent: 'some messages...some messages...'
+    });
+  }
+
+  error(): void {
+    this.modalService.error({
+      nzTitle: 'This is an error message',
+      nzContent: 'some messages...some messages...'
+    });
+  }
+
+  warning(): void {
+    this.modalService.warning({
+      nzTitle: 'This is an warning message',
+      nzContent: 'some messages...some messages...'
+    });
+  }
+}