feat(module:tooltip,etc): support custom origin (#4849)

components/core/element-patch/element-patch.directive.ts

@@ -0,0 +1,20 @@
+/**
+ * @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 { Directive, ElementRef } from '@angular/core';
+
+/**
+ * A patch directive to select the element of a component.
+ */
+@Directive({
+  selector: '[nz-element]',
+  exportAs: 'nzElement'
+})
+export class NzElementPatchDirective {
+  constructor(public elementRef: ElementRef) {}
+}

components/core/element-patch/element-patch.module.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { NzElementPatchDirective } from './element-patch.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [NzElementPatchDirective],
+  exports: [NzElementPatchDirective]
+})
+export class NzElementPatchModule {}

components/core/element-patch/element-patch.spec.ts

@@ -0,0 +1 @@
+// This directive is tested in tooltip.spec.ts

components/core/element-patch/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export * from './public-api';

components/core/element-patch/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+  }
+}

components/core/element-patch/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+export * from './element-patch.directive';
+export * from './element-patch.module';

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

@@ -25,6 +25,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 | `[nzPopconfirmTitle]` | Title of the confirmation box | `string \| TemplateRef<void>` | - |
 | `[nzPopconfirmTrigger]` | Popconfirm trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
 | `[nzPopconfirmPlacement]` | The position of the popconfirm relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` |
+| `[nzPopconfirmOrigin]` | Origin of the popconfirm | `ElementRef` | - |
 
 
 | Param | Description | Type | Default value |

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

@@ -26,6 +26,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 | `[nzPopconfirmTitle]` | 确认框的描述 | `string \| TemplateRef<void>` | - |
 | `[nzPopconfirmTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
 | `[nzPopconfirmPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` |
+| `[nzPopconfirmOrigin]` | 气泡框定位元素 | `ElementRef` | - |
 
 
 | 参数 | 说明 | 类型 | 默认值 |

components/popconfirm/popconfirm.ts

@@ -18,7 +18,6 @@ import {
   Host,
   Input,
   OnDestroy,
-  OnInit,
   Optional,
   Output,
   Renderer2,
@@ -39,14 +38,15 @@ import { takeUntil } from 'rxjs/operators';
   selector: '[nz-popconfirm]',
   exportAs: 'nzPopconfirm',
   host: {
-    '[class.ant-popover-open]': 'isTooltipComponentVisible'
+    '[class.ant-popover-open]': 'visible'
   }
 })
-export class NzPopconfirmDirective extends NzTooltipBaseDirective implements OnInit {
+export class NzPopconfirmDirective extends NzTooltipBaseDirective {
   @Input('nzPopconfirmTitle') specificTitle: NzTSType;
   @Input('nz-popconfirm') directiveNameTitle: NzTSType | null;
   @Input('nzPopconfirmTrigger') specificTrigger: NzTooltipTrigger;
   @Input('nzPopconfirmPlacement') specificPlacement: string;
+  @Input('nzPopconfirmOrigin') specificOrigin: ElementRef<HTMLElement>;
   @Input() nzOkText: string;
   @Input() nzOkType: string;
   @Input() nzCancelText: string;
@@ -92,13 +92,13 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective implements OnI
   /**
    * @override
    */
-  protected createTooltipComponent(): void {
-    super.createTooltipComponent();
+  protected createComponent(): void {
+    super.createComponent();
 
-    (this.tooltip as NzPopconfirmComponent).nzOnCancel.pipe(takeUntil(this.destroy$)).subscribe(() => {
+    (this.component as NzPopconfirmComponent).nzOnCancel.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.nzOnCancel.emit();
     });
-    (this.tooltip as NzPopconfirmComponent).nzOnConfirm.pipe(takeUntil(this.destroy$)).subscribe(() => {
+    (this.component as NzPopconfirmComponent).nzOnConfirm.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.nzOnConfirm.emit();
     });
   }
@@ -138,11 +138,11 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective implements OnI
             <div>
               <div class="ant-popover-inner-content">
                 <div class="ant-popover-message">
-                  <ng-container *nzStringTemplateOutlet="title">
+                  <ng-container *nzStringTemplateOutlet="nzTitle">
                     <ng-container *nzStringTemplateOutlet="nzIcon">
                       <i nz-icon [nzType]="nzIcon || 'exclamation-circle'" nzTheme="fill"></i>
                     </ng-container>
-                    <div class="ant-popover-message-title">{{ title }}</div>
+                    <div class="ant-popover-message-title">{{ nzTitle }}</div>
                   </ng-container>
                 </div>
                 <div class="ant-popover-buttons">

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

@@ -26,6 +26,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
 | `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef<void>` | - |
 | `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
 | `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` |
+| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - |
 
 
 Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.

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

@@ -27,6 +27,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
 | `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef<void>` | - |
 | `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` |
 | `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` |
+| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - |
 
 
 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。

components/popover/popover.ts

@@ -31,7 +31,7 @@ import { isTooltipEmpty, NzTooltipBaseDirective, NzToolTipComponent, NzTooltipTr
   selector: '[nz-popover]',
   exportAs: 'nzPopover',
   host: {
-    '[class.ant-popover-open]': 'isTooltipComponentVisible'
+    '[class.ant-popover-open]': 'visible'
   }
 })
 export class NzPopoverDirective extends NzTooltipBaseDirective {
@@ -40,6 +40,7 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
   @Input('nz-popover') directiveNameTitle: NzTSType | null;
   @Input('nzPopoverTrigger') specificTrigger: NzTooltipTrigger;
   @Input('nzPopoverPlacement') specificPlacement: string;
+  @Input('nzPopoverOrigin') specificOrigin: ElementRef<HTMLElement>;
 
   componentFactory: ComponentFactory<NzPopoverComponent> = this.resolver.resolveComponentFactory(NzPopoverComponent);
 
@@ -86,11 +87,11 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
           <div class="ant-popover-arrow"></div>
           <div class="ant-popover-inner" role="tooltip">
             <div>
-              <div class="ant-popover-title" *ngIf="title">
-                <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
+              <div class="ant-popover-title" *ngIf="nzTitle">
+                <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
               </div>
               <div class="ant-popover-inner-content">
-                <ng-container *nzStringTemplateOutlet="content">{{ content }}</ng-container>
+                <ng-container *nzStringTemplateOutlet="nzContent">{{ nzContent }}</ng-container>
               </div>
             </div>
           </div>
@@ -107,6 +108,6 @@ export class NzPopoverComponent extends NzToolTipComponent {
   }
 
   protected isEmpty(): boolean {
-    return isTooltipEmpty(this.title) && isTooltipEmpty(this.content);
+    return isTooltipEmpty(this.nzTitle) && isTooltipEmpty(this.nzContent);
   }
 }