diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html deleted file mode 100644 index 1c9eb406100..00000000000 --- a/components/popconfirm/nz-popconfirm.component.html +++ /dev/null @@ -1,50 +0,0 @@ - - -
-
-
-
-
-
-
- - - - -
{{ title }}
- -
-
- - -
-
-
-
-
-
- diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts deleted file mode 100644 index 263c61da6cc..00000000000 --- a/components/popconfirm/nz-popconfirm.component.ts +++ /dev/null @@ -1,83 +0,0 @@ -/** - * @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 { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - Host, - OnDestroy, - Optional, - TemplateRef, - ViewEncapsulation -} from '@angular/core'; - -import { NzNoAnimationDirective, zoomBigMotion } from 'ng-zorro-antd/core'; -import { NzToolTipComponent, NzTooltipTrigger } from 'ng-zorro-antd/tooltip'; -import { Subject } from 'rxjs'; - -@Component({ - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - selector: 'nz-popconfirm', - exportAs: 'nzPopconfirmComponent', - preserveWhitespaces: false, - animations: [zoomBigMotion], - templateUrl: './nz-popconfirm.component.html', - styles: [ - ` - .ant-popover { - position: relative; - } - ` - ] -}) -export class NzPopconfirmComponent extends NzToolTipComponent implements OnDestroy { - nzCancelText: string; - nzCondition = false; - nzIcon: string | TemplateRef; - nzOkText: string; - nzOkType: string = 'primary'; - - readonly nzOnCancel = new Subject(); - readonly nzOnConfirm = new Subject(); - - protected _trigger: NzTooltipTrigger = 'click'; - - _prefix = 'ant-popover-placement'; - _hasBackdrop = true; - - constructor(cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective) { - super(cdr, noAnimation); - } - - ngOnDestroy(): void { - super.ngOnDestroy(); - - this.nzOnCancel.complete(); - this.nzOnConfirm.complete(); - } - - show(): void { - if (!this.nzCondition) { - super.show(); - } else { - this.onConfirm(); - } - } - - onCancel(): void { - this.nzOnCancel.next(); - super.hide(); - } - - onConfirm(): void { - this.nzOnConfirm.next(); - super.hide(); - } -} diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts deleted file mode 100644 index 2d5631026a6..00000000000 --- a/components/popconfirm/nz-popconfirm.directive.ts +++ /dev/null @@ -1,99 +0,0 @@ -/** - * @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 { - ComponentFactory, - ComponentFactoryResolver, - Directive, - ElementRef, - EventEmitter, - Host, - Input, - OnInit, - Optional, - Output, - Renderer2, - TemplateRef, - ViewContainerRef -} from '@angular/core'; - -import { takeUntil } from 'rxjs/operators'; - -import { InputBoolean, NzNoAnimationDirective, NzTSType } from 'ng-zorro-antd/core'; -import { NzTooltipBaseDirective, NzTooltipTrigger } from 'ng-zorro-antd/tooltip'; - -import { NzPopconfirmComponent } from './nz-popconfirm.component'; - -@Directive({ - selector: '[nz-popconfirm]', - exportAs: 'nzPopconfirm', - host: { - '[class.ant-popover-open]': 'isTooltipComponentVisible' - } -}) -export class NzPopconfirmDirective extends NzTooltipBaseDirective implements OnInit { - @Input('nzPopconfirmTitle') specificTitle: NzTSType; - @Input('nz-popconfirm') directiveNameTitle: NzTSType | null; - @Input('nzPopconfirmTrigger') specificTrigger: NzTooltipTrigger; - @Input('nzPopconfirmPlacement') specificPlacement: string; - @Input() nzOkText: string; - @Input() nzOkType: string; - @Input() nzCancelText: string; - @Input() nzIcon: string | TemplateRef; - @Input() @InputBoolean() nzCondition: boolean; - - /** - * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. - * Please use a more specific API. Like `nzTooltipTrigger`. - */ - @Input() nzTrigger: NzTooltipTrigger = 'click'; - - @Output() readonly nzOnCancel = new EventEmitter(); - @Output() readonly nzOnConfirm = new EventEmitter(); - - protected readonly componentFactory: ComponentFactory = this.resolver.resolveComponentFactory( - NzPopconfirmComponent - ); - - protected readonly needProxyProperties = [ - 'nzOverlayClassName', - 'nzOverlayStyle', - 'nzMouseEnterDelay', - 'nzMouseLeaveDelay', - 'nzVisible', - 'nzOkText', - 'nzOkType', - 'nzCancelText', - 'nzCondition', - 'nzIcon' - ]; - - constructor( - elementRef: ElementRef, - hostView: ViewContainerRef, - resolver: ComponentFactoryResolver, - renderer: Renderer2, - @Host() @Optional() noAnimation?: NzNoAnimationDirective - ) { - super(elementRef, hostView, resolver, renderer, noAnimation); - } - - /** - * @override - */ - protected createTooltipComponent(): void { - super.createTooltipComponent(); - - (this.tooltip as NzPopconfirmComponent).nzOnCancel.pipe(takeUntil(this.$destroy)).subscribe(() => { - this.nzOnCancel.emit(); - }); - (this.tooltip as NzPopconfirmComponent).nzOnConfirm.pipe(takeUntil(this.$destroy)).subscribe(() => { - this.nzOnConfirm.emit(); - }); - } -} diff --git a/components/popconfirm/nz-popconfirm.module.ts b/components/popconfirm/popconfirm.module.ts similarity index 89% rename from components/popconfirm/nz-popconfirm.module.ts rename to components/popconfirm/popconfirm.module.ts index 540ffb380ca..4a7c778243d 100644 --- a/components/popconfirm/nz-popconfirm.module.ts +++ b/components/popconfirm/popconfirm.module.ts @@ -16,8 +16,7 @@ import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; -import { NzPopconfirmComponent } from './nz-popconfirm.component'; -import { NzPopconfirmDirective } from './nz-popconfirm.directive'; +import { NzPopconfirmComponent, NzPopconfirmDirective } from './popconfirm'; @NgModule({ declarations: [NzPopconfirmComponent, NzPopconfirmDirective], diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/popconfirm.spec.ts similarity index 86% rename from components/popconfirm/nz-popconfirm.spec.ts rename to components/popconfirm/popconfirm.spec.ts index 1a00d264800..7ef813c6ce8 100644 --- a/components/popconfirm/nz-popconfirm.spec.ts +++ b/components/popconfirm/popconfirm.spec.ts @@ -1,25 +1,28 @@ import { OverlayContainer } from '@angular/cdk/overlay'; import { Component, ElementRef, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, inject, tick } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { dispatchMouseEvent } from 'ng-zorro-antd/core'; +import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/componet-bed'; import { NzIconTestModule } from 'ng-zorro-antd/icon/testing'; -import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; -import { NzPopconfirmModule } from './nz-popconfirm.module'; +import { NzPopconfirmModule } from './popconfirm.module'; describe('NzPopconfirm', () => { + let testBed: ComponentBed; + let fixture: ComponentFixture; + let component: NzPopconfirmTestNewComponent; let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [NzPopconfirmModule, NoopAnimationsModule, NzToolTipModule, NzIconTestModule], - declarations: [NzpopconfirmTestNewComponent] + testBed = createComponentBed(NzPopconfirmTestNewComponent, { + imports: [NzPopconfirmModule, NoopAnimationsModule, NzIconTestModule] }); - - TestBed.compileComponents(); + fixture = testBed.fixture; + component = testBed.component; + fixture.detectChanges(); })); beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => { @@ -31,9 +34,6 @@ describe('NzPopconfirm', () => { overlayContainer.ngOnDestroy(); }); - let fixture: ComponentFixture; - let component: NzpopconfirmTestNewComponent; - function getTitleText(): Element | null { return overlayContainerElement.querySelector('.ant-popover-message-title'); } @@ -42,12 +42,6 @@ describe('NzPopconfirm', () => { return overlayContainerElement.querySelectorAll('.ant-popover-buttons button')[index]; } - beforeEach(() => { - fixture = TestBed.createComponent(NzpopconfirmTestNewComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - function waitingForTooltipToggling(): void { fixture.detectChanges(); tick(500); @@ -145,7 +139,7 @@ describe('NzPopconfirm', () => { title-template ` }) -export class NzpopconfirmTestNewComponent { +export class NzPopconfirmTestNewComponent { confirm = jasmine.createSpy('confirm'); cancel = jasmine.createSpy('cancel'); condition = false; diff --git a/components/popconfirm/popconfirm.ts b/components/popconfirm/popconfirm.ts new file mode 100644 index 00000000000..fa611b47e6b --- /dev/null +++ b/components/popconfirm/popconfirm.ts @@ -0,0 +1,216 @@ +/** + * @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 { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ComponentFactory, + ComponentFactoryResolver, + Directive, + ElementRef, + EventEmitter, + Host, + Input, + OnDestroy, + OnInit, + Optional, + Output, + Renderer2, + TemplateRef, + ViewContainerRef, + ViewEncapsulation +} from '@angular/core'; + +import { InputBoolean, NzNoAnimationDirective, NzTSType, zoomBigMotion } from 'ng-zorro-antd/core'; +import { NzTooltipBaseDirective, NzToolTipComponent, NzTooltipTrigger } from 'ng-zorro-antd/tooltip'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +@Directive({ + selector: '[nz-popconfirm]', + exportAs: 'nzPopconfirm', + host: { + '[class.ant-popover-open]': 'isTooltipComponentVisible' + } +}) +export class NzPopconfirmDirective extends NzTooltipBaseDirective implements OnInit { + @Input('nzPopconfirmTitle') specificTitle: NzTSType; + @Input('nz-popconfirm') directiveNameTitle: NzTSType | null; + @Input('nzPopconfirmTrigger') specificTrigger: NzTooltipTrigger; + @Input('nzPopconfirmPlacement') specificPlacement: string; + @Input() nzOkText: string; + @Input() nzOkType: string; + @Input() nzCancelText: string; + @Input() nzIcon: string | TemplateRef; + @Input() @InputBoolean() nzCondition: boolean; + + /** + * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. + * Please use a more specific API. Like `nzTooltipTrigger`. + */ + @Input() nzTrigger: NzTooltipTrigger = 'click'; + + @Output() readonly nzOnCancel = new EventEmitter(); + @Output() readonly nzOnConfirm = new EventEmitter(); + + protected readonly componentFactory: ComponentFactory = this.resolver.resolveComponentFactory( + NzPopconfirmComponent + ); + + protected readonly needProxyProperties = [ + 'nzOverlayClassName', + 'nzOverlayStyle', + 'nzMouseEnterDelay', + 'nzMouseLeaveDelay', + 'nzVisible', + 'nzOkText', + 'nzOkType', + 'nzCancelText', + 'nzCondition', + 'nzIcon' + ]; + + constructor( + elementRef: ElementRef, + hostView: ViewContainerRef, + resolver: ComponentFactoryResolver, + renderer: Renderer2, + @Host() @Optional() noAnimation?: NzNoAnimationDirective + ) { + super(elementRef, hostView, resolver, renderer, noAnimation); + } + + /** + * @override + */ + protected createTooltipComponent(): void { + super.createTooltipComponent(); + + (this.tooltip as NzPopconfirmComponent).nzOnCancel.pipe(takeUntil(this.$destroy)).subscribe(() => { + this.nzOnCancel.emit(); + }); + (this.tooltip as NzPopconfirmComponent).nzOnConfirm.pipe(takeUntil(this.$destroy)).subscribe(() => { + this.nzOnConfirm.emit(); + }); + } +} + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + selector: 'nz-popconfirm', + exportAs: 'nzPopconfirmComponent', + preserveWhitespaces: false, + animations: [zoomBigMotion], + template: ` + +
+
+
+
+
+
+
+ + + + +
{{ title }}
+ +
+
+ + +
+
+
+
+
+
+ + `, + styles: [ + ` + .ant-popover { + position: relative; + } + ` + ] +}) +export class NzPopconfirmComponent extends NzToolTipComponent implements OnDestroy { + nzCancelText: string; + nzCondition = false; + nzIcon: string | TemplateRef; + nzOkText: string; + nzOkType: string = 'primary'; + + readonly nzOnCancel = new Subject(); + readonly nzOnConfirm = new Subject(); + + protected _trigger: NzTooltipTrigger = 'click'; + + _prefix = 'ant-popover-placement'; + _hasBackdrop = true; + + constructor(cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective) { + super(cdr, noAnimation); + } + + ngOnDestroy(): void { + super.ngOnDestroy(); + + this.nzOnCancel.complete(); + this.nzOnConfirm.complete(); + } + + /** + * @override + */ + show(): void { + if (!this.nzCondition) { + super.show(); + } else { + this.onConfirm(); + } + } + + onCancel(): void { + this.nzOnCancel.next(); + super.hide(); + } + + onConfirm(): void { + this.nzOnConfirm.next(); + super.hide(); + } +} diff --git a/components/popconfirm/public-api.ts b/components/popconfirm/public-api.ts index 4ced640a6f8..e00c489d1c5 100644 --- a/components/popconfirm/public-api.ts +++ b/components/popconfirm/public-api.ts @@ -6,6 +6,5 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -export * from './nz-popconfirm.component'; -export * from './nz-popconfirm.directive'; -export * from './nz-popconfirm.module'; +export * from './popconfirm'; +export * from './popconfirm.module'; diff --git a/components/popover/nz-popover.component.html b/components/popover/nz-popover.component.html deleted file mode 100644 index 7e2d353aeec..00000000000 --- a/components/popover/nz-popover.component.html +++ /dev/null @@ -1,36 +0,0 @@ - - -
-
-
- -
-
- diff --git a/components/popover/nz-popover.component.ts b/components/popover/nz-popover.component.ts deleted file mode 100644 index 77aba177ce1..00000000000 --- a/components/popover/nz-popover.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, Optional, ViewEncapsulation } from '@angular/core'; - -import { NzNoAnimationDirective, zoomBigMotion } from 'ng-zorro-antd/core'; -import { isTooltipEmpty, NzToolTipComponent } from 'ng-zorro-antd/tooltip'; - -@Component({ - selector: 'nz-popover', - exportAs: 'nzPopoverComponent', - animations: [zoomBigMotion], - templateUrl: './nz-popover.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - preserveWhitespaces: false, - styles: [ - ` - .ant-popover { - position: relative; - } - ` - ] -}) -export class NzPopoverComponent extends NzToolTipComponent { - _prefix = 'ant-popover-placement'; - - constructor(cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective) { - super(cdr, noAnimation); - } - - protected isEmpty(): boolean { - return isTooltipEmpty(this.title) && isTooltipEmpty(this.content); - } -} diff --git a/components/popover/nz-popover.directive.ts b/components/popover/nz-popover.directive.ts deleted file mode 100644 index ea262486398..00000000000 --- a/components/popover/nz-popover.directive.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * @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 { - ComponentFactory, - ComponentFactoryResolver, - Directive, - ElementRef, - Host, - Input, - Optional, - Renderer2, - ViewContainerRef -} from '@angular/core'; - -import { NzNoAnimationDirective, NzTSType } from 'ng-zorro-antd/core'; -import { NzTooltipBaseDirective, NzTooltipTrigger } from 'ng-zorro-antd/tooltip'; - -import { NzPopoverComponent } from './nz-popover.component'; - -@Directive({ - selector: '[nz-popover]', - exportAs: 'nzPopover', - host: { - '[class.ant-popover-open]': 'isTooltipComponentVisible' - } -}) -export class NzPopoverDirective extends NzTooltipBaseDirective { - @Input('nzPopoverTitle') specificTitle: NzTSType; - @Input('nzPopoverContent') specificContent: NzTSType; - @Input('nz-popover') directiveNameTitle: NzTSType | null; - @Input('nzPopoverTrigger') specificTrigger: NzTooltipTrigger; - @Input('nzPopoverPlacement') specificPlacement: string; - - componentFactory: ComponentFactory = this.resolver.resolveComponentFactory(NzPopoverComponent); - - constructor( - elementRef: ElementRef, - hostView: ViewContainerRef, - resolver: ComponentFactoryResolver, - renderer: Renderer2, - @Host() @Optional() public noAnimation?: NzNoAnimationDirective - ) { - super(elementRef, hostView, resolver, renderer, noAnimation); - } -} diff --git a/components/popover/nz-popover.module.ts b/components/popover/popover.module.ts similarity index 87% rename from components/popover/nz-popover.module.ts rename to components/popover/popover.module.ts index a081f3e0194..26b4f8f1bb7 100644 --- a/components/popover/nz-popover.module.ts +++ b/components/popover/popover.module.ts @@ -13,8 +13,7 @@ import { NgModule } from '@angular/core'; import { NzNoAnimationModule, NzOutletModule, NzOverlayModule } from 'ng-zorro-antd/core'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; -import { NzPopoverComponent } from './nz-popover.component'; -import { NzPopoverDirective } from './nz-popover.directive'; +import { NzPopoverComponent, NzPopoverDirective } from './popover'; @NgModule({ entryComponents: [NzPopoverComponent], diff --git a/components/popover/nz-popover.spec.ts b/components/popover/popover.spec.ts similarity index 84% rename from components/popover/nz-popover.spec.ts rename to components/popover/popover.spec.ts index f2711be8a25..78e9eff066b 100644 --- a/components/popover/nz-popover.spec.ts +++ b/components/popover/popover.spec.ts @@ -1,26 +1,29 @@ import { OverlayContainer } from '@angular/cdk/overlay'; import { Component, ElementRef, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, inject, tick } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { dispatchMouseEvent } from 'ng-zorro-antd/core'; +import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/componet-bed'; import { NzIconTestModule } from 'ng-zorro-antd/icon/testing'; -import { NzToolTipModule } from '../tooltip/nz-tooltip.module'; -import { NzPopoverDirective } from './nz-popover.directive'; -import { NzPopoverModule } from './nz-popover.module'; +import { NzPopoverDirective } from './popover'; +import { NzPopoverModule } from './popover.module'; describe('NzPopover', () => { + let testBed: ComponentBed; + let fixture: ComponentFixture; + let component: NzPopoverTestComponent; let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [NzPopoverModule, NoopAnimationsModule, NzToolTipModule, NzIconTestModule], - declarations: [NzPopoverTestComponent] + testBed = createComponentBed(NzPopoverTestComponent, { + imports: [NzPopoverModule, NoopAnimationsModule, NzIconTestModule] }); - - TestBed.compileComponents(); + fixture = testBed.fixture; + component = testBed.component; + fixture.detectChanges(); })); beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => { @@ -45,21 +48,12 @@ describe('NzPopover', () => { return getTextContentOf('.ant-popover-inner-content'); } - let fixture: ComponentFixture; - let component: NzPopoverTestComponent; - function waitingForTooltipToggling(): void { fixture.detectChanges(); tick(500); fixture.detectChanges(); } - beforeEach(() => { - fixture = TestBed.createComponent(NzPopoverTestComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - it('should support string', fakeAsync(() => { const triggerElement = component.stringPopover.nativeElement; diff --git a/components/popover/popover.ts b/components/popover/popover.ts new file mode 100644 index 00000000000..fc1a7d693aa --- /dev/null +++ b/components/popover/popover.ts @@ -0,0 +1,117 @@ +/** + * @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 { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ComponentFactory, + ComponentFactoryResolver, + Directive, + ElementRef, + Host, + Input, + Optional, + Renderer2, + ViewContainerRef, + ViewEncapsulation +} from '@angular/core'; + +import { NzNoAnimationDirective, NzTSType, zoomBigMotion } from 'ng-zorro-antd/core'; +import { isTooltipEmpty, NzTooltipBaseDirective, NzToolTipComponent, NzTooltipTrigger } from 'ng-zorro-antd/tooltip'; + +@Directive({ + selector: '[nz-popover]', + exportAs: 'nzPopover', + host: { + '[class.ant-popover-open]': 'isTooltipComponentVisible' + } +}) +export class NzPopoverDirective extends NzTooltipBaseDirective { + @Input('nzPopoverTitle') specificTitle: NzTSType; + @Input('nzPopoverContent') specificContent: NzTSType; + @Input('nz-popover') directiveNameTitle: NzTSType | null; + @Input('nzPopoverTrigger') specificTrigger: NzTooltipTrigger; + @Input('nzPopoverPlacement') specificPlacement: string; + + componentFactory: ComponentFactory = this.resolver.resolveComponentFactory(NzPopoverComponent); + + constructor( + elementRef: ElementRef, + hostView: ViewContainerRef, + resolver: ComponentFactoryResolver, + renderer: Renderer2, + @Host() @Optional() public noAnimation?: NzNoAnimationDirective + ) { + super(elementRef, hostView, resolver, renderer, noAnimation); + } +} + +@Component({ + selector: 'nz-popover', + exportAs: 'nzPopoverComponent', + animations: [zoomBigMotion], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + preserveWhitespaces: false, + template: ` + +
+
+
+ +
+
+ + `, + styles: [ + ` + .ant-popover { + position: relative; + } + ` + ] +}) +export class NzPopoverComponent extends NzToolTipComponent { + _prefix = 'ant-popover-placement'; + + constructor(cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective) { + super(cdr, noAnimation); + } + + protected isEmpty(): boolean { + return isTooltipEmpty(this.title) && isTooltipEmpty(this.content); + } +} diff --git a/components/popover/public-api.ts b/components/popover/public-api.ts index 61c6743b4b1..5f5eb9e5a32 100644 --- a/components/popover/public-api.ts +++ b/components/popover/public-api.ts @@ -6,6 +6,5 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -export * from './nz-popover.component'; -export * from './nz-popover.directive'; -export * from './nz-popover.module'; +export * from './popover'; +export * from './popover.module'; diff --git a/components/tooltip/README.md b/components/tooltip/README.md deleted file mode 100644 index 9cfb4438a8a..00000000000 --- a/components/tooltip/README.md +++ /dev/null @@ -1,37 +0,0 @@ -# Tooltip Component - -## Deprecation - -### Component Usage - -Old component usage is now deprecated and will be removed in 9.0.0. - -e.g. - -```html - - - -``` - -### Some api without prefix. - -If we want to use `nz-tooltip` and `nz-popover`, their properties would conflict. - -What if we want to assign different titles to `nz-tooltip` and `nz-popover`? In the past we have to create an extra element. - -e.g. - -```html - - - -``` - -With API with prefix, we can simply write this: - -```html - -``` - -Some api without prefix is now deprecated and would be removed in 10.0.0. diff --git a/components/tooltip/nz-tooltip-base.directive.ts b/components/tooltip/base.ts similarity index 71% rename from components/tooltip/nz-tooltip-base.directive.ts rename to components/tooltip/base.ts index a07db0983fa..bb1449b678a 100644 --- a/components/tooltip/nz-tooltip-base.directive.ts +++ b/components/tooltip/base.ts @@ -6,9 +6,10 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { CdkOverlayOrigin } from '@angular/cdk/overlay'; +import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay'; import { AfterViewInit, + ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ElementRef, @@ -20,14 +21,26 @@ import { Output, Renderer2, SimpleChanges, + TemplateRef, + ViewChild, ViewContainerRef } from '@angular/core'; -import { NgStyleInterface, NzNoAnimationDirective, NzTSType, warnDeprecation } from 'ng-zorro-antd/core'; +import { + DEFAULT_TOOLTIP_POSITIONS, + getPlacementName, + isNotNil, + NgClassInterface, + NgStyleInterface, + NzNoAnimationDirective, + NzTSType, + POSITION_MAP, + toBoolean, + warnDeprecation +} from 'ng-zorro-antd/core'; import { Subject } from 'rxjs'; import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; -import { NzTooltipBaseComponent } from './nz-tooltip-base.component'; -import { NzTooltipTrigger } from './nz-tooltip.definitions'; +export type NzTooltipTrigger = 'click' | 'focus' | 'hover' | null; export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDestroy, AfterViewInit { directiveNameTitle?: NzTSType | null; @@ -131,6 +144,7 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes this.updateChangedProperties(changes); } + // Warn deprecated things. if (changes.nzTitle) { warnDeprecation( `'nzTitle' of 'nz-tooltip' is deprecated and will be removed in 10.0.0. @@ -333,3 +347,150 @@ Please use 'nzTooltipTrigger' instead. The same with 'nz-popover' and 'nz-popcon } } } + +export abstract class NzTooltipBaseComponent implements OnDestroy { + @ViewChild('overlay', { static: false }) overlay: CdkConnectedOverlay; + + nzVisibleChange = new Subject(); + nzTitle: NzTSType | null; + nzContent: NzTSType | null; + nzOverlayClassName: string; + nzOverlayStyle: NgStyleInterface = {}; + nzMouseEnterDelay: number = 0.15; + nzMouseLeaveDelay: number = 0.1; + + set nzVisible(value: boolean) { + const visible = toBoolean(value); + if (this._visible !== visible) { + this._visible = visible; + } + } + + get nzVisible(): boolean { + return this._visible; + } + + _visible = false; + + set nzTrigger(value: NzTooltipTrigger) { + this._trigger = value; + this._hasBackdrop = this._trigger === 'click'; + } + + get nzTrigger(): NzTooltipTrigger { + return this._trigger; + } + + protected _trigger: NzTooltipTrigger = 'hover'; + + set nzPlacement(value: string) { + if (value !== this.preferredPlacement) { + this.preferredPlacement = value; + this._positions = [POSITION_MAP[this.nzPlacement], ...this._positions]; + } + } + + get nzPlacement(): string { + return this.preferredPlacement; + } + + nzContentTemplate: TemplateRef; + nzTitleTemplate: TemplateRef; + origin: CdkOverlayOrigin; + preferredPlacement = 'top'; + + _classMap: NgClassInterface = {}; + _hasBackdrop = false; + _prefix = 'ant-tooltip-placement'; + _positions: ConnectionPositionPair[] = [...DEFAULT_TOOLTIP_POSITIONS]; + + get content(): string | TemplateRef | null { + return this.nzContent !== undefined ? this.nzContent : this.nzContentTemplate; + } + + get title(): string | TemplateRef | null { + return this.nzTitle !== undefined ? this.nzTitle : this.nzTitleTemplate; + } + + constructor(public cdr: ChangeDetectorRef, public noAnimation?: NzNoAnimationDirective) {} + + ngOnDestroy(): void { + this.nzVisibleChange.complete(); + } + + show(): void { + if (this.nzVisible) { + return; + } + + if (!this.isEmpty()) { + this.nzVisible = true; + this.nzVisibleChange.next(true); + this.cdr.detectChanges(); + } + } + + hide(): void { + if (!this.nzVisible) { + return; + } + + this.nzVisible = false; + this.nzVisibleChange.next(false); + this.cdr.detectChanges(); + } + + updateByDirective(): void { + this.setClassMap(); + this.cdr.detectChanges(); + + Promise.resolve().then(() => { + this.updatePosition(); + this.updateVisibilityByTitle(); + }); + } + + /** + * Force the component to update its position. + */ + updatePosition(): void { + if (this.origin && this.overlay && this.overlay.overlayRef) { + this.overlay.overlayRef.updatePosition(); + } + } + + onPositionChange(position: ConnectedOverlayPositionChange): void { + this.preferredPlacement = getPlacementName(position)!; + this.setClassMap(); + this.cdr.detectChanges(); + } + + setClassMap(): void { + this._classMap = { + [this.nzOverlayClassName]: true, + [`${this._prefix}-${this.preferredPlacement}`]: true + }; + } + + setOverlayOrigin(origin: CdkOverlayOrigin): void { + this.origin = origin; + this.cdr.markForCheck(); + } + + /** + * Hide the tooltip while the content is empty. + */ + private updateVisibilityByTitle(): void { + if (this.isEmpty()) { + this.hide(); + } + } + /** + * Empty tooltip cannot be opened. + */ + protected abstract isEmpty(): boolean; +} + +export function isTooltipEmpty(value: string | TemplateRef | null): boolean { + return value instanceof TemplateRef ? false : value === '' || !isNotNil(value); +} diff --git a/components/tooltip/nz-tooltip-base.component.ts b/components/tooltip/nz-tooltip-base.component.ts deleted file mode 100644 index fbba2e1080a..00000000000 --- a/components/tooltip/nz-tooltip-base.component.ts +++ /dev/null @@ -1,163 +0,0 @@ -/** - * @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 { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay'; -import { ChangeDetectorRef, OnDestroy, TemplateRef, ViewChild } from '@angular/core'; -import { Subject } from 'rxjs'; - -import { - DEFAULT_TOOLTIP_POSITIONS, - getPlacementName, - isNotNil, - NgClassInterface, - NgStyleInterface, - NzNoAnimationDirective, - NzTSType, - POSITION_MAP, - toBoolean -} from 'ng-zorro-antd/core'; - -import { NzTooltipTrigger } from './nz-tooltip.definitions'; - -export abstract class NzTooltipBaseComponent implements OnDestroy { - @ViewChild('overlay', { static: false }) overlay: CdkConnectedOverlay; - - nzVisibleChange = new Subject(); - nzTitle: NzTSType | null; - nzContent: NzTSType | null; - nzOverlayClassName: string; - nzOverlayStyle: NgStyleInterface = {}; - nzMouseEnterDelay: number = 0.15; - nzMouseLeaveDelay: number = 0.1; - - set nzVisible(value: boolean) { - const visible = toBoolean(value); - if (this._visible !== visible) { - this._visible = visible; - } - } - - get nzVisible(): boolean { - return this._visible; - } - - _visible = false; - - set nzTrigger(value: NzTooltipTrigger) { - this._trigger = value; - this._hasBackdrop = this._trigger === 'click'; - } - - get nzTrigger(): NzTooltipTrigger { - return this._trigger; - } - - protected _trigger: NzTooltipTrigger = 'hover'; - - set nzPlacement(value: string) { - if (value !== this.preferredPlacement) { - this.preferredPlacement = value; - this._positions = [POSITION_MAP[this.nzPlacement], ...this._positions]; - } - } - - get nzPlacement(): string { - return this.preferredPlacement; - } - - nzContentTemplate: TemplateRef; - nzTitleTemplate: TemplateRef; - origin: CdkOverlayOrigin; - preferredPlacement = 'top'; - - _classMap: NgClassInterface = {}; - _hasBackdrop = false; - _prefix = 'ant-tooltip-placement'; - _positions: ConnectionPositionPair[] = [...DEFAULT_TOOLTIP_POSITIONS]; - - get content(): string | TemplateRef | null { - return this.nzContent !== undefined ? this.nzContent : this.nzContentTemplate; - } - - get title(): string | TemplateRef | null { - return this.nzTitle !== undefined ? this.nzTitle : this.nzTitleTemplate; - } - - constructor(public cdr: ChangeDetectorRef, public noAnimation?: NzNoAnimationDirective) {} - - ngOnDestroy(): void { - this.nzVisibleChange.complete(); - } - - show(): void { - if (this.nzVisible) { - return; - } - - if (!this.isEmpty()) { - this.nzVisible = true; - this.nzVisibleChange.next(true); - this.cdr.detectChanges(); - } - } - - hide(): void { - if (!this.nzVisible) { - return; - } - - this.nzVisible = false; - this.nzVisibleChange.next(false); - this.cdr.detectChanges(); - } - - updateByDirective(): void { - this.setClassMap(); - this.cdr.detectChanges(); - - Promise.resolve().then(() => { - this.updatePosition(); - }); - } - - /** - * Force the component to update its position. - */ - updatePosition(): void { - if (this.origin && this.overlay && this.overlay.overlayRef) { - this.overlay.overlayRef.updatePosition(); - } - } - - onPositionChange(position: ConnectedOverlayPositionChange): void { - this.preferredPlacement = getPlacementName(position)!; - this.setClassMap(); - this.cdr.detectChanges(); - } - - setClassMap(): void { - this._classMap = { - [this.nzOverlayClassName]: true, - [`${this._prefix}-${this.preferredPlacement}`]: true - }; - } - - setOverlayOrigin(origin: CdkOverlayOrigin): void { - this.origin = origin; - this.cdr.markForCheck(); - } - - /** - * Empty tooltip cannot be openned. - */ - protected abstract isEmpty(): boolean; -} - -export function isTooltipEmpty(value: string | TemplateRef | null): boolean { - return value instanceof TemplateRef ? false : value === '' || !isNotNil(value); -} diff --git a/components/tooltip/nz-tooltip.component.html b/components/tooltip/nz-tooltip.component.html deleted file mode 100644 index 70e0bbb1af5..00000000000 --- a/components/tooltip/nz-tooltip.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - -
-
-
-
- {{ title }} -
-
-
- diff --git a/components/tooltip/nz-tooltip.component.ts b/components/tooltip/nz-tooltip.component.ts deleted file mode 100644 index 1c2aed87edd..00000000000 --- a/components/tooltip/nz-tooltip.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * @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 { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChild, - Host, - Input, - Optional, - TemplateRef, - ViewEncapsulation -} from '@angular/core'; - -import { NzNoAnimationDirective, NzTSType, zoomBigMotion } from 'ng-zorro-antd/core'; - -import { isTooltipEmpty, NzTooltipBaseComponent } from './nz-tooltip-base.component'; - -@Component({ - selector: 'nz-tooltip', - exportAs: 'nzTooltipComponent', - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - animations: [zoomBigMotion], - templateUrl: './nz-tooltip.component.html', - preserveWhitespaces: false, - styles: [ - ` - .ant-tooltip { - position: relative; - } - ` - ] -}) -export class NzToolTipComponent extends NzTooltipBaseComponent { - @Input() nzTitle: NzTSType | null; - @ContentChild('nzTemplate', { static: true }) nzTitleTemplate: TemplateRef; - - constructor(cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective) { - super(cdr); - } - - protected isEmpty(): boolean { - return isTooltipEmpty(this.title); - } -} diff --git a/components/tooltip/nz-tooltip.definitions.ts b/components/tooltip/nz-tooltip.definitions.ts deleted file mode 100644 index a1980327c52..00000000000 --- a/components/tooltip/nz-tooltip.definitions.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @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 type NzTooltipTrigger = 'click' | 'focus' | 'hover' | null; diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts deleted file mode 100644 index 4fb298ec8fb..00000000000 --- a/components/tooltip/nz-tooltip.directive.ts +++ /dev/null @@ -1,59 +0,0 @@ -/** - * @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 { - ComponentFactory, - ComponentFactoryResolver, - Directive, - ElementRef, - Host, - Input, - Optional, - Renderer2, - ViewContainerRef -} from '@angular/core'; - -import { NzNoAnimationDirective, NzTSType } from 'ng-zorro-antd/core'; - -import { NzTooltipBaseDirective } from './nz-tooltip-base.directive'; -import { NzToolTipComponent } from './nz-tooltip.component'; -import { NzTooltipTrigger } from './nz-tooltip.definitions'; - -@Directive({ - selector: '[nz-tooltip]', - exportAs: 'nzTooltip', - host: { - '[class.ant-tooltip-open]': 'isTooltipComponentVisible' - } -}) -export class NzTooltipDirective extends NzTooltipBaseDirective { - /** - * The title that should have highest priority. - */ - @Input('nzTooltipTitle') specificTitle: NzTSType; - - /** - * Use the directive's name as the title that have priority in the second place. - */ - @Input('nz-tooltip') directiveNameTitle: NzTSType | null; - - @Input('nzTooltipTrigger') specificTrigger: NzTooltipTrigger; - @Input('nzTooltipPlacement') specificPlacement: string; - - componentFactory: ComponentFactory = this.resolver.resolveComponentFactory(NzToolTipComponent); - - constructor( - elementRef: ElementRef, - hostView: ViewContainerRef, - resolver: ComponentFactoryResolver, - renderer: Renderer2, - @Host() @Optional() noAnimation?: NzNoAnimationDirective - ) { - super(elementRef, hostView, resolver, renderer, noAnimation); - } -} diff --git a/components/tooltip/public-api.ts b/components/tooltip/public-api.ts index 93493b33035..b3a070a0394 100644 --- a/components/tooltip/public-api.ts +++ b/components/tooltip/public-api.ts @@ -6,9 +6,6 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -export * from './nz-tooltip.definitions'; -export * from './nz-tooltip.component'; -export * from './nz-tooltip.directive'; -export * from './nz-tooltip.module'; -export * from './nz-tooltip-base.component'; -export * from './nz-tooltip-base.directive'; +export * from './tooltip'; +export * from './tooltip.module'; +export * from './base'; diff --git a/components/tooltip/nz-tooltip.module.ts b/components/tooltip/tooltip.module.ts similarity index 87% rename from components/tooltip/nz-tooltip.module.ts rename to components/tooltip/tooltip.module.ts index 45daee70c3c..9e49fe4173c 100644 --- a/components/tooltip/nz-tooltip.module.ts +++ b/components/tooltip/tooltip.module.ts @@ -12,8 +12,7 @@ import { NgModule } from '@angular/core'; import { NzNoAnimationModule, NzOutletModule, NzOverlayModule } from 'ng-zorro-antd/core'; // NOTE: the `t` is not uppercase in directives. Change this would however introduce breaking change. -import { NzToolTipComponent } from './nz-tooltip.component'; -import { NzTooltipDirective } from './nz-tooltip.directive'; +import { NzToolTipComponent, NzTooltipDirective } from './tooltip'; @NgModule({ declarations: [NzToolTipComponent, NzTooltipDirective], diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/tooltip.spec.ts similarity index 86% rename from components/tooltip/nz-tooltip.spec.ts rename to components/tooltip/tooltip.spec.ts index d425758edb7..1262eefaf6b 100644 --- a/components/tooltip/nz-tooltip.spec.ts +++ b/components/tooltip/tooltip.spec.ts @@ -1,89 +1,27 @@ import { OverlayContainer } from '@angular/cdk/overlay'; import { Component, ElementRef, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, inject, tick } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { dispatchMouseEvent } from 'ng-zorro-antd/core'; +import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/componet-bed'; import { NzIconTestModule } from 'ng-zorro-antd/icon/testing'; -import { NzTooltipBaseDirective } from './nz-tooltip-base.directive'; -import { NzTooltipDirective } from './nz-tooltip.directive'; -import { NzToolTipModule } from './nz-tooltip.module'; +import { NzTooltipBaseDirective } from './base'; +import { NzTooltipDirective } from './tooltip'; +import { NzToolTipModule } from './tooltip.module'; -@Component({ - template: ` - - Hover - - - - Click - - - - Focus - - - - Manually - - -
- - - -
- - - title-template - - ` -}) -export class NzTooltipTestComponent { - @ViewChild('titleString', { static: false }) titleString: ElementRef; - @ViewChild('titleString', { static: false, read: NzTooltipDirective }) - titleStringDirective: NzTooltipDirective; - - @ViewChild('titleTemplate', { static: false }) titleTemplate: ElementRef; - @ViewChild('titleTemplate', { static: false, read: NzTooltipDirective }) - titleTemplateDirective: NzTooltipDirective; - - @ViewChild('focusTooltip', { static: false }) focusTemplate: ElementRef; - - trigger: string | null = 'click'; - - @ViewChild('inBtnGroup', { static: false }) inBtnGroup: ElementRef; - - title: string | null = 'title-string'; - visible = false; - visibilityTogglingCount = 0; - - onVisibleChange(): void { - this.visibilityTogglingCount += 1; - } -} - -describe('NzTooltip', () => { +describe('nz-tooltip', () => { + let testBed: ComponentBed; + let fixture: ComponentFixture; + let component: NzTooltipTestComponent; let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [NzToolTipModule, NoopAnimationsModule, NzIconTestModule], - declarations: [NzTooltipTestComponent] + testBed = createComponentBed(NzTooltipTestComponent, { + imports: [NzToolTipModule, NoopAnimationsModule, NzIconTestModule] }); - TestBed.compileComponents(); })); beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => { @@ -95,9 +33,6 @@ describe('NzTooltip', () => { overlayContainer.ngOnDestroy(); }); - let fixture: ComponentFixture; - let component: NzTooltipTestComponent; - function waitingForTooltipToggling(): void { fixture.detectChanges(); tick(500); @@ -109,8 +44,8 @@ describe('NzTooltip', () => { } beforeEach(() => { - fixture = TestBed.createComponent(NzTooltipTestComponent); - component = fixture.componentInstance; + fixture = testBed.fixture; + component = testBed.component; fixture.detectChanges(); }); @@ -207,6 +142,27 @@ describe('NzTooltip', () => { expect(component.visibilityTogglingCount).toBe(0); })); + it('should hide when the title is changed to null', fakeAsync(() => { + const title = 'title-string'; + const triggerElement = component.titleString.nativeElement; + + expect(overlayContainerElement.textContent).not.toContain(title); + + dispatchMouseEvent(triggerElement, 'mouseenter'); + waitingForTooltipToggling(); + fixture.detectChanges(); + expect(overlayContainerElement.textContent).toContain(title); + expect(component.visibilityTogglingCount).toBe(1); + + // Should close when title is changed to null. + component.title = null; + fixture.detectChanges(); + waitingForTooltipToggling(); + fixture.detectChanges(); + expect(overlayContainerElement.textContent).not.toContain(title); + expect(component.visibilityTogglingCount).toBe(2); + })); + it('should set `setTitle` proxy to `nzTitle`', fakeAsync(() => { const triggerElement = component.titleString.nativeElement; const tooltipComponent = component.titleStringDirective.tooltip; @@ -256,3 +212,67 @@ describe('NzTooltip', () => { function getOverlayElementForTooltip(tooltip: NzTooltipBaseDirective): HTMLElement { return tooltip.tooltip.overlay.overlayRef.overlayElement; } + +@Component({ + template: ` + + Hover + + + + Click + + + + Focus + + + + Manually + + +
+ + + +
+ + + title-template + + ` +}) +export class NzTooltipTestComponent { + @ViewChild('titleString', { static: false }) titleString: ElementRef; + @ViewChild('titleString', { static: false, read: NzTooltipDirective }) + titleStringDirective: NzTooltipDirective; + + @ViewChild('titleTemplate', { static: false }) titleTemplate: ElementRef; + @ViewChild('titleTemplate', { static: false, read: NzTooltipDirective }) + titleTemplateDirective: NzTooltipDirective; + + @ViewChild('focusTooltip', { static: false }) focusTemplate: ElementRef; + + trigger: string | null = 'click'; + + @ViewChild('inBtnGroup', { static: false }) inBtnGroup: ElementRef; + + title: string | null = 'title-string'; + visible = false; + visibilityTogglingCount = 0; + + onVisibleChange(): void { + this.visibilityTogglingCount += 1; + } +} diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts new file mode 100644 index 00000000000..f9dd4211f26 --- /dev/null +++ b/components/tooltip/tooltip.ts @@ -0,0 +1,121 @@ +/** + * @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 { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ComponentFactory, + ComponentFactoryResolver, + ContentChild, + Directive, + ElementRef, + Host, + Input, + Optional, + Renderer2, + TemplateRef, + ViewContainerRef, + ViewEncapsulation +} from '@angular/core'; + +import { NzNoAnimationDirective, NzTSType, zoomBigMotion } from 'ng-zorro-antd/core'; + +import { isTooltipEmpty, NzTooltipBaseComponent, NzTooltipBaseDirective, NzTooltipTrigger } from './base'; + +@Directive({ + selector: '[nz-tooltip]', + exportAs: 'nzTooltip', + host: { + '[class.ant-tooltip-open]': 'isTooltipComponentVisible' + } +}) +export class NzTooltipDirective extends NzTooltipBaseDirective { + /** + * The title that should have highest priority. + */ + @Input('nzTooltipTitle') specificTitle: NzTSType; + + /** + * Use the directive's name as the title that have priority in the second place. + */ + @Input('nz-tooltip') directiveNameTitle: NzTSType | null; + + @Input('nzTooltipTrigger') specificTrigger: NzTooltipTrigger; + @Input('nzTooltipPlacement') specificPlacement: string; + + componentFactory: ComponentFactory = this.resolver.resolveComponentFactory(NzToolTipComponent); + + constructor( + elementRef: ElementRef, + hostView: ViewContainerRef, + resolver: ComponentFactoryResolver, + renderer: Renderer2, + @Host() @Optional() noAnimation?: NzNoAnimationDirective + ) { + super(elementRef, hostView, resolver, renderer, noAnimation); + } +} + +@Component({ + selector: 'nz-tooltip', + exportAs: 'nzTooltipComponent', + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + animations: [zoomBigMotion], + template: ` + +
+
+
+
+ {{ title }} +
+
+
+ + `, + preserveWhitespaces: false, + styles: [ + ` + .ant-tooltip { + position: relative; + } + ` + ] +}) +export class NzToolTipComponent extends NzTooltipBaseComponent { + @Input() nzTitle: NzTSType | null; + @ContentChild('nzTemplate', { static: true }) nzTitleTemplate: TemplateRef; + + constructor(cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective) { + super(cdr, noAnimation); + } + + protected isEmpty(): boolean { + return isTooltipEmpty(this.title); + } +} diff --git a/components/upload/nz-upload.spec.ts b/components/upload/nz-upload.spec.ts index c44a53e77bf..28cf20bbd63 100644 --- a/components/upload/nz-upload.spec.ts +++ b/components/upload/nz-upload.spec.ts @@ -14,7 +14,7 @@ import en_US from '../i18n/languages/en_US'; import { NzI18nModule } from '../i18n/nz-i18n.module'; import { NzI18nService } from '../i18n/nz-i18n.service'; import { NzProgressModule } from '../progress/nz-progress.module'; -import { NzToolTipModule } from '../tooltip/nz-tooltip.module'; +import { NzToolTipModule } from '../tooltip/tooltip.module'; import { ShowUploadListInterface,