feat(module:nzx-modal): add(refactor) the new modal component

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

src/components/ng-zorro-antd.module.ts

@@ -33,6 +33,7 @@ import { NzMenuModule } from './menu/nz-menu.module';
 import { NzMessageModule } from './message/nz-message.module';
 import { NzModalModule } from './modal/nz-modal.module';
 import { NzNotificationModule } from './notification/nz-notification.module';
+import { NzxModalModule } from './nzx-modal/nzx-modal.module';
 import { NzPaginationModule } from './pagination/nz-pagination.module';
 import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
 import { NzPopoverModule } from './popover/nz-popover.module';
@@ -70,8 +71,7 @@ import { NzRootConfig, NZ_ROOT_CONFIG } from './root/nz-root-config';
 
 // Mixes
 export * from './locale/index';
-// export { NZ_DEFAULT_LOCALE } from './locale-provider';
-// export * from './locale-provider/locale';
+export * from './nzx-modal/public-api';
 export { NZ_LOGGER_STATE } from './util/logger/index';
 
 // Modules
@@ -246,7 +246,6 @@ export { NZ_ROOT_CONFIG, NzRootConfig } from './root/nz-root-config';
   exports: [
     LoggerModule,
     NzLocaleModule,
-    // NzLocaleProviderModule,
     NzButtonModule,
     NzAlertModule,
     NzBadgeModule,
@@ -261,6 +260,7 @@ export { NZ_ROOT_CONFIG, NzRootConfig } from './root/nz-root-config';
     NzMessageModule,
     NzModalModule,
     NzNotificationModule,
+    NzxModalModule,
     NzPaginationModule,
     NzPopconfirmModule,
     NzPopoverModule,

src/components/nzx-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}`;
+  }
+}

src/components/nzx-modal/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/components/nzx-modal/modal-public-agent.class.ts

@@ -0,0 +1,9 @@
+/**
+ * API class that public to users to handle the modal instance.
+ * ModalPublicAgent is aim to avoid accessing to the modal instance directly by users.
+ */
+export abstract class ModalPublicAgent {
+  abstract open(): void;
+  abstract close(): void;
+  abstract destroy(): void;
+}

src/components/nzx-modal/modal-util.ts

@@ -0,0 +1,24 @@
+export interface ClickPosition {
+  x: number;
+  y: number;
+}
+
+export class ModalUtil {
+  private lastPosition: ClickPosition = null;
+
+  constructor(private document: Document) {
+    this.listenDocumentClick();
+  }
+
+  getLastClickPosition(): ClickPosition | null {
+    return this.lastPosition;
+  }
+
+  listenDocumentClick(): void {
+    this.document.addEventListener('click', (event: MouseEvent) => {
+      this.lastPosition = { x: event.clientX, y: event.clientY };
+    });
+  }
+}
+
+export default new ModalUtil(document);

src/components/nzx-modal/nzx-modal.component.html

@@ -0,0 +1,118 @@
+<ng-template #tplOriginContent><ng-content></ng-content></ng-template> <!-- Compatible: the <ng-content> can appear only once -->
+
+<div>
+  <div *ngIf="nzMask"
+    class="ant-modal-mask"
+    [ngClass]="maskAnimationClassMap"
+    [class.ant-modal-mask-hidden]="hidden"
+    [ngStyle]="nzMaskStyle"
+    [style.zIndex]="nzZIndex"
+  ></div>
+  <div
+    (click)="onClickMask($event)"
+    class="ant-modal-wrap {{ nzWrapClassName }}"
+    [style.zIndex]="nzZIndex"
+    [style.display]="hidden ? 'none' : ''"
+    tabindex="-1"
+    role="dialog"
+  >
+    <div #modalContainer
+      class="ant-modal {{ nzClassName }}"
+      [ngClass]="modalAnimationClassMap"
+      [ngStyle]="nzStyle"
+      [style.width]="nzWidth | toCssUnit"
+      [style.transform-origin]="transformOrigin"
+      role="document"
+    >
+      <div class="ant-modal-content">
+        <button *ngIf="nzClosable" (click)="onClickCloseBtn($event)" class="ant-modal-close" aria-label="Close">
+          <span class="ant-modal-close-x"></span>
+        </button>
+        <ng-container [ngSwitch]="true">
+          <ng-container *ngSwitchCase="isModalType('default')" [ngTemplateOutlet]="tplContentDefault"></ng-container>
+          <ng-container *ngSwitchCase="isModalType('confirm')" [ngTemplateOutlet]="tplContentConfirm"></ng-container>
+        </ng-container>
+      </div>
+    </div>
+    <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinel</div>
+  </div>
+</div>
+
+<!-- [Predefined] Default Modal Content -->
+<ng-template #tplContentDefault>
+  <div *ngIf="nzTitle" class="ant-modal-header">
+    <div class="ant-modal-title">
+      <ng-container [ngSwitch]="true">
+        <ng-container *ngSwitchCase="isTemplateRef(nzTitle)" [ngTemplateOutlet]="nzTitle"></ng-container>
+        <ng-container *ngSwitchCase="isNonEmptyString(nzTitle)"><div [innerHTML]="nzTitle"></div></ng-container>
+      </ng-container>
+    </div>
+  </div>
+  <div class="ant-modal-body" [ngStyle]="nzBodyStyle">
+    <ng-container #bodyContainer>
+      <ng-container *ngIf="!isComponent(nzContent)" [ngSwitch]="true">
+        <ng-container *ngSwitchCase="isTemplateRef(nzContent)" [ngTemplateOutlet]="nzContent"></ng-container>
+        <ng-container *ngSwitchCase="isNonEmptyString(nzContent)"><div [innerHTML]="nzContent"></div></ng-container>
+        <ng-container *ngSwitchDefault [ngTemplateOutlet]="tplOriginContent"></ng-container>
+      </ng-container>
+    </ng-container>
+  </div>
+  <div *ngIf="nzFooter !== null" class="ant-modal-footer">
+    <ng-container [ngSwitch]="true">
+      <ng-container *ngSwitchCase="isTemplateRef(nzFooter)" [ngTemplateOutlet]="nzFooter"></ng-container>
+      <ng-container *ngSwitchCase="isNonEmptyString(nzFooter)"><div [innerHTML]="nzFooter"></div></ng-container>
+      <ng-container *ngSwitchCase="isModalButtons(nzFooter)">
+        <button *ngFor="let button of nzFooter" nz-button
+          (click)="onButtonClick(button)"
+          [hidden]="getButtonCallableProp(button, 'show')"
+          [nzLoading]="getButtonCallableProp(button, 'loading')"
+          [disabled]="getButtonCallableProp(button, 'disabled')"
+          [nzType]="button.type"
+          [nzShape]="button.shape"
+          [nzSize]="button.size"
+          [nzGhost]="button.ghost"
+        >{{ button.label }}</button>
+      </ng-container>
+      <ng-container *ngSwitchDefault>
+        <button *ngIf="nzCancelText" nz-button nzSize="large" (click)="onClickOkCancel($event, 'cancel')" [nzLoading]="nzCancelLoading"><span>{{ nzCancelText }}</span></button>
+        <button *ngIf="nzOkText" nz-button [nzType]="nzOkType" nzSize="large" (click)="onClickOkCancel($event, 'ok')" [nzLoading]="nzOkLoading">
+          <span>{{ nzOkText }}</span>
+        </button>
+      </ng-container>
+    </ng-container>
+  </div>
+</ng-template>
+<!-- /[Predefined] Default Modal Content -->
+
+<!-- [Predefined] Confirm Modal Content -->
+<ng-template #tplContentConfirm>
+  <div class="ant-modal-body" [ngStyle]="nzBodyStyle">
+    <div class="ant-confirm-body-wrapper">
+      <div class="ant-confirm-body">
+        <i class="anticon anticon-{{ nzIconType }}"></i>
+        <span class="ant-confirm-title">
+          <ng-container [ngSwitch]="true">
+            <ng-container *ngSwitchCase="isTemplateRef(nzTitle)" [ngTemplateOutlet]="nzTitle"></ng-container>
+            <ng-container *ngSwitchCase="isNonEmptyString(nzTitle)"><div [innerHTML]="nzTitle"></div></ng-container>
+          </ng-container>
+        </span>
+        <div class="ant-confirm-content">
+          <ng-container #bodyContainer>
+            <ng-container *ngIf="!isComponent(nzContent)" [ngSwitch]="true">
+              <ng-container *ngSwitchCase="isTemplateRef(nzContent)" [ngTemplateOutlet]="nzContent"></ng-container>
+              <ng-container *ngSwitchCase="isNonEmptyString(nzContent)"><div [innerHTML]="nzContent"></div></ng-container>
+              <ng-container *ngSwitchDefault [ngTemplateOutlet]="tplOriginContent"></ng-container>
+            </ng-container>
+          </ng-container>
+        </div>
+      </div>
+      <div class="ant-confirm-btns">
+        <button *ngIf="nzCancelText" nz-button nzSize="large" (click)="onClickOkCancel($event, 'cancel')" [nzLoading]="nzCancelLoading"><span>{{ nzCancelText }}</span></button>
+        <button #autoFocusButtonOk *ngIf="nzOkText" nz-button [nzType]="nzOkType" nzSize="large" (click)="onClickOkCancel($event, 'ok')" [nzLoading]="nzOkLoading">
+          <span>{{ nzOkText }}</span>
+        </button>
+      </div>
+    </div> <!-- /.ant-confirm-body-wrapper -->
+  </div>
+</ng-template>
+<!-- /[Predefined] Confirm Modal Content -->