refactor: refactor tooltip components

components/core/types/public-api.ts

@@ -12,3 +12,4 @@ export * from './drop-down-position';
 export * from './indexable';
 export * from './ng-class';
 export * from './size';
+export * from './template';

components/core/types/template.ts

@@ -0,0 +1,14 @@
+/**
+ * @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 { TemplateRef } from '@angular/core';
+
+/**
+ * A joined type of string and `TemplateRef<void>`.
+ */
+export type NzTSType = string | TemplateRef<void>;

components/popconfirm/demo/basic.ts

@@ -1,10 +1,15 @@
 import { Component } from '@angular/core';
-import { NzMessageService } from 'ng-zorro-antd';
+import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'nz-demo-popconfirm-basic',
   template: `
-    <a nz-popconfirm nzTitle="Are you sure delete this task?" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()"
+    <a
+      nz-popconfirm
+      nzPopconfirmTitle="Are you sure delete this task?"
+      nzPopconfirmPlacement="bottom"
+      (nzOnConfirm)="confirm()"
+      (nzOnCancel)="cancel()"
       >Delete</a
     >
   `

components/popconfirm/demo/custom-icon.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-popconfirm-custom-icon',
   template: `
-    <a nz-popconfirm nzTitle="Are you sure?" [nzIcon]="iconTpl">Delete</a>
+    <a nz-popconfirm nzPopconfirmTitle="Are you sure?" [nzIcon]="iconTpl">Delete</a>
     <ng-template #iconTpl>
       <i nz-icon nzType="question-circle-o" style="color: red;"></i>
     </ng-template>

components/popconfirm/demo/dynamic-trigger.ts

@@ -6,7 +6,7 @@ import { NzMessageService } from 'ng-zorro-antd';
   template: `
     <a
       nz-popconfirm
-      nzTitle="Are you sure delete this task?"
+      nzPopconfirmTitle="Are you sure delete this task?"
       [nzCondition]="switchValue"
       (nzOnConfirm)="confirm()"
       (nzOnCancel)="cancel()"

components/popconfirm/demo/locale.ts

@@ -6,7 +6,7 @@ import { NzMessageService } from 'ng-zorro-antd';
   template: `
     <a
       nz-popconfirm
-      nzTitle="Are you sure?"
+      nzPopconfirmTitle="Are you sure?"
       nzOkText="ok"
       nzCancelText="cancel"
       (nzOnConfirm)="confirm()"

components/popconfirm/demo/placement.ts

@@ -7,30 +7,30 @@ import { NzMessageService } from 'ng-zorro-antd';
     <div style="margin-left: 60px">
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="topLeft"
+        nzPopconfirmPlacement="topLeft"
         nz-button
       >
         TL
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="top"
+        nzPopconfirmPlacement="top"
         nz-button
       >
         Top
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="topRight"
+        nzPopconfirmPlacement="topRight"
         nz-button
       >
         TR
@@ -39,30 +39,30 @@ import { NzMessageService } from 'ng-zorro-antd';
     <div style="width: 60px; float: left;">
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="leftTop"
+        nzPopconfirmPlacement="leftTop"
         nz-button
       >
         LT
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="left"
+        nzPopconfirmPlacement="left"
         nz-button
       >
         Left
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="leftBottom"
+        nzPopconfirmPlacement="leftBottom"
         nz-button
       >
         LB
@@ -71,30 +71,30 @@ import { NzMessageService } from 'ng-zorro-antd';
     <div style="width: 60px; margin-left: 252px;">
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="rightTop"
+        nzPopconfirmPlacement="rightTop"
         nz-button
       >
         RT
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="right"
+        nzPopconfirmPlacement="right"
         nz-button
       >
         Right
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="rightBottom"
+        nzPopconfirmPlacement="rightBottom"
         nz-button
       >
         RB
@@ -103,30 +103,30 @@ import { NzMessageService } from 'ng-zorro-antd';
     <div style="margin-left: 60px; clear: both;">
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="bottomLeft"
+        nzPopconfirmPlacement="bottomLeft"
         nz-button
       >
         BL
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="bottom"
+        nzPopconfirmPlacement="bottom"
         nz-button
       >
         Bottom
       </button>
       <button
         nz-popconfirm
-        nzTitle="Are you sure delete this task?"
+        nzPopconfirmTitle="Are you sure delete this task?"
         (nzOnConfirm)="confirm()"
         (nzOnCancel)="cancel()"
-        nzPlacement="bottomRight"
+        nzPopconfirmPlacement="bottomRight"
         nz-button
       >
         BR

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

@@ -26,10 +26,12 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |
+| `[nzPopconfirmTitle]` | Title of the confirmation box | `string \| TemplateRef<void>` | - |
+| `[nzPopconfirmTrigger]` | Popconfirm trigger mode | `'click' \| 'focus' \| 'hover'` | `'hover'` |
+| `[nzPopconfirmPlacement]` | The position of the popconfirm relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` |
 | `[nzCancelText]` | Text of the Cancel button | `string` | `'Cancel'` |
 | `[nzOkText]` | Text of the Confirm button | `string` | `'Confirm'` |
 | `[nzOkType]` | Button `type` of the Confirm button | `'primary' \| 'ghost' \| 'dashed' \| 'danger' \| 'default'` | `'primary'` |
-| `[nzTitle]` | Title of the confirmation box | `string \| TemplateRef<void>` | - |
 | `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | `boolean` | `false` |
 | `[nzIcon]` | Customize icon of confirmation  | `string \| TemplateRef<void>` | - |
 | `(nzOnCancel)` | Callback of cancel | `EventEmitter<void>` | - |

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

@@ -27,10 +27,12 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| `[nzPopconfirmTitle]` | 确认框的描述 | `string \| TemplateRef<void>` | - |
+| `[nzPopconfirmTrigger]` | 触发行为 | `'click' \| 'focus' \| 'hover'` | `'hover'` |
+| `[nzPopconfirmPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` |
 | `[nzCancelText]` | 取消按钮文字 | `string` | `'取消'` |
 | `[nzOkText]` | 确认按钮文字 | `string` | `'确定'` |
 | `[nzOkType]` | 确认按钮类型 | `'primary' \| 'ghost' \| 'dashed' \| 'danger' \| 'default'` | `'primary'` |
-| `[nzTitle]` | 确认框的描述 | `string \| TemplateRef<void>` | - |
 | `[nzCondition]` | 是否直接触发 `nzOnConfirm` 而不弹出框 | `boolean` | `false` |
 | `[nzIcon]` | 自定义弹出框的 icon  | `string \| TemplateRef<void>` | - |
 | `(nzOnCancel)` | 点击取消的回调 | `EventEmitter<void>` | - |

components/popconfirm/nz-popconfirm.component.html

@@ -3,19 +3,18 @@
   #overlay="cdkConnectedOverlay"
   cdkConnectedOverlay
   nzConnectedOverlay
-  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
   (backdropClick)="hide()"
   (detach)="hide()"
   (positionChange)="onPositionChange($event)"
   [cdkConnectedOverlayPositions]="_positions"
-  [cdkConnectedOverlayOpen]="visible$ | async">
+  [cdkConnectedOverlayOpen]="_visible">
   <div class="ant-popover"
     [ngClass]="_classMap"
     [ngStyle]="nzOverlayStyle"
     [nzNoAnimation]="noAnimation?.nzNoAnimation"
-    [@zoomBigMotion]="'active'"
-    (@zoomBigMotion.done)="_afterVisibilityAnimation($event)">
+    [@zoomBigMotion]="'active'">
     <div class="ant-popover-content">
       <div class="ant-popover-arrow"></div>
       <div class="ant-popover-inner">

components/popconfirm/nz-popconfirm.component.ts

@@ -20,7 +20,7 @@ import {
 } from '@angular/core';
 
 import { zoomBigMotion, InputBoolean, NzNoAnimationDirective } from 'ng-zorro-antd/core';
-import { NzToolTipComponent } from 'ng-zorro-antd/tooltip';
+import { NzTooltipBaseComponentLegacy, NzTooltipTrigger, NzToolTipComponent } from 'ng-zorro-antd/tooltip';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -30,6 +30,12 @@ import { NzToolTipComponent } from 'ng-zorro-antd/tooltip';
   preserveWhitespaces: false,
   animations: [zoomBigMotion],
   templateUrl: './nz-popconfirm.component.html',
+  providers: [
+    {
+      provide: NzTooltipBaseComponentLegacy,
+      useExisting: NzPopconfirmComponent
+    }
+  ],
   styles: [
     `
       .ant-popover {
@@ -39,10 +45,6 @@ import { NzToolTipComponent } from 'ng-zorro-antd/tooltip';
   ]
 })
 export class NzPopconfirmComponent extends NzToolTipComponent {
-  _prefix = 'ant-popover-placement';
-  _trigger = 'click';
-  _hasBackdrop = true;
-
   @Input() nzOkText: string;
   @Input() nzOkType: string = 'primary';
   @Input() nzCancelText: string;
@@ -52,25 +54,29 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
   @Output() readonly nzOnCancel: EventEmitter<void> = new EventEmitter();
   @Output() readonly nzOnConfirm: EventEmitter<void> = new EventEmitter();
 
+  _prefix = 'ant-popover-placement';
+  _trigger: NzTooltipTrigger = 'click';
+  _hasBackdrop = true;
+
   constructor(cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective) {
     super(cdr, noAnimation);
   }
 
   show(): void {
     if (!this.nzCondition) {
-      this.nzVisible = true;
+      super.show();
     } else {
       this.onConfirm();
     }
   }
 
   onCancel(): void {
     this.nzOnCancel.emit();
-    this.nzVisible = false;
+    super.hide();
   }
 
   onConfirm(): void {
     this.nzOnConfirm.emit();
-    this.nzVisible = false;
+    super.hide();
   }
 }