UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

844 lines (837 loc) 26.5 kB
import { EventEmitter, Input, Output, ViewChild, TemplateRef, Directive, ElementRef, ViewContainerRef, ComponentFactoryResolver, Renderer2, Host, Optional, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, NgModule } from '@angular/core'; import { zoomBigMotion } from 'ng-zorro-antd/core/animation'; import { NzNoAnimationDirective, NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { OverlayModule } from '@angular/cdk/overlay'; import { warnDeprecation } from 'ng-zorro-antd/core/logger'; import { DEFAULT_TOOLTIP_POSITIONS, POSITION_MAP, getPlacementName, NzOverlayModule } from 'ng-zorro-antd/core/overlay'; import { toBoolean, isNotNil } from 'ng-zorro-antd/core/util'; import { Subject } from 'rxjs'; import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { CommonModule } from '@angular/common'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; /** * @fileoverview added by tsickle * Generated from: base.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @abstract */ class NzTooltipBaseDirective { /** * @param {?} elementRef * @param {?} hostView * @param {?} resolver * @param {?} renderer * @param {?=} noAnimation */ constructor(elementRef, hostView, resolver, renderer, noAnimation) { this.elementRef = elementRef; this.hostView = hostView; this.resolver = resolver; this.renderer = renderer; this.noAnimation = noAnimation; /** * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. * Please use a more specific API. Like `nzTooltipTrigger`. */ this.nzTrigger = 'hover'; /** * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. * Please use a more specific API. Like `nzTooltipPlacement`. */ this.nzPlacement = 'top'; this.nzMouseEnterDelay = 0.15; this.nzMouseLeaveDelay = 0.1; this.needProxyProperties = [ 'nzOverlayClassName', 'nzOverlayStyle', 'nzMouseEnterDelay', 'nzMouseLeaveDelay', 'nzVisible', 'noAnimation' ]; this.nzVisibleChange = new EventEmitter(); this.visible = false; this.destroy$ = new Subject(); this.triggerDisposables = []; } /** * This true title that would be used in other parts on this component. * @protected * @return {?} */ get title() { return this.specificTitle || this.directiveNameTitle || this.nzTitle; } /** * @protected * @return {?} */ get content() { return this.specificContent || this.directiveNameContent || this.nzContent; } /** * @protected * @return {?} */ get placement() { return this.specificPlacement || this.nzPlacement; } /** * @protected * @return {?} */ get trigger() { // NzTooltipTrigger can be null. return typeof this.specificTrigger !== 'undefined' ? this.specificTrigger : this.nzTrigger; } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { const { nzTrigger, specificTrigger } = changes; /** @type {?} */ const trigger = specificTrigger || nzTrigger; if (trigger && !trigger.isFirstChange()) { this.registerTriggers(); } if (this.component) { this.updateChangedProperties(changes); } // Warn deprecated things. if (changes.nzTitle) { warnDeprecation(`'nzTitle' of 'nz-tooltip' is deprecated and will be removed in 10.0.0. Please use 'nzTooltipTitle' instead. The same with 'nz-popover' and 'nz-popconfirm'.`); } if (changes.nzContent) { warnDeprecation(`'nzContent' of 'nz-popover' is deprecated and will be removed in 10.0.0. Please use 'nzPopoverContent' instead.`); } if (changes.nzPlacement) { warnDeprecation(`'nzPlacement' of 'nz-tooltip' is deprecated and will be removed in 10.0.0. Please use 'nzTooltipContent' instead. The same with 'nz-popover' and 'nz-popconfirm'.`); } if (changes.nzTrigger) { warnDeprecation(`'nzTrigger' of 'nz-tooltip' is deprecated and will be removed in 10.0.0. Please use 'nzTooltipTrigger' instead. The same with 'nz-popover' and 'nz-popconfirm'.`); } } /** * @return {?} */ ngAfterViewInit() { this.createComponent(); this.registerTriggers(); } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); // Clear toggling timer. Issue #3875 #4317 #4386 this.clearTogglingTimer(); this.removeTriggerListeners(); } /** * @return {?} */ show() { this.component.show(); } /** * @return {?} */ hide() { this.component.hide(); } /** * Force the component to update its position. * @return {?} */ updatePosition() { if (this.component) { this.component.updatePosition(); } } /** * Create a dynamic tooltip component. This method can be override. * @protected * @return {?} */ createComponent() { /** @type {?} */ const componentRef = this.hostView.createComponent(this.componentFactory); this.component = componentRef.instance; // Remove the component's DOM because it should be in the overlay container. this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), componentRef.location.nativeElement); this.component.setOverlayOrigin({ elementRef: this.specificOrigin || this.elementRef }); this.updateChangedProperties(this.needProxyProperties); this.component.nzVisibleChange.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((/** * @param {?} visible * @return {?} */ (visible) => { this.visible = visible; this.nzVisibleChange.emit(visible); })); } /** * @protected * @return {?} */ registerTriggers() { // When the method gets invoked, all properties has been synced to the dynamic component. // After removing the old API, we can just check the directive's own `nzTrigger`. /** @type {?} */ const el = this.elementRef.nativeElement; /** @type {?} */ const trigger = this.trigger; this.removeTriggerListeners(); if (trigger === 'hover') { /** @type {?} */ let overlayElement; this.triggerDisposables.push(this.renderer.listen(el, 'mouseenter', (/** * @return {?} */ () => { this.delayEnterLeave(true, true, this.nzMouseEnterDelay); }))); this.triggerDisposables.push(this.renderer.listen(el, 'mouseleave', (/** * @return {?} */ () => { this.delayEnterLeave(true, false, this.nzMouseLeaveDelay); if (this.component.overlay.overlayRef && !overlayElement) { overlayElement = this.component.overlay.overlayRef.overlayElement; this.triggerDisposables.push(this.renderer.listen(overlayElement, 'mouseenter', (/** * @return {?} */ () => { this.delayEnterLeave(false, true); }))); this.triggerDisposables.push(this.renderer.listen(overlayElement, 'mouseleave', (/** * @return {?} */ () => { this.delayEnterLeave(false, false); }))); } }))); } else if (trigger === 'focus') { this.triggerDisposables.push(this.renderer.listen(el, 'focus', (/** * @return {?} */ () => this.show()))); this.triggerDisposables.push(this.renderer.listen(el, 'blur', (/** * @return {?} */ () => this.hide()))); } else if (trigger === 'click') { this.triggerDisposables.push(this.renderer.listen(el, 'click', (/** * @param {?} e * @return {?} */ e => { e.preventDefault(); this.show(); }))); } // Else do nothing because user wants to control the visibility programmatically. } /** * Sync changed properties to the component and trigger change detection in that component. * @protected * @param {?} propertiesOrChanges * @return {?} */ updateChangedProperties(propertiesOrChanges) { /** @type {?} */ const isArray = Array.isArray(propertiesOrChanges); /** @type {?} */ const keys = isArray ? ((/** @type {?} */ (propertiesOrChanges))) : Object.keys(propertiesOrChanges); keys.forEach((/** * @param {?} property * @return {?} */ (property) => { if (this.needProxyProperties.indexOf(property) !== -1) { // @ts-ignore this.updateComponentValue(property, this[property]); } })); if (isArray) { this.updateComponentValue('nzTitle', this.title); this.updateComponentValue('nzContent', this.content); this.updateComponentValue('nzPlacement', this.placement); this.updateComponentValue('nzTrigger', this.trigger); } else { /** @type {?} */ const c = (/** @type {?} */ (propertiesOrChanges)); if (c.specificTitle || c.directiveNameTitle || c.nzTitle) { this.updateComponentValue('nzTitle', this.title); } if (c.specificContent || c.directiveNameContent || c.nzContent) { this.updateComponentValue('nzContent', this.content); } if (c.specificTrigger || c.nzTrigger) { this.updateComponentValue('nzTrigger', this.trigger); } if (c.specificPlacement || c.nzPlacement) { this.updateComponentValue('nzPlacement', this.placement); } } this.component.updateByDirective(); } /** * @private * @param {?} key * @param {?} value * @return {?} */ updateComponentValue(key, value) { if (typeof value !== 'undefined') { // @ts-ignore this.component[key] = value; } } /** * @private * @param {?} isOrigin * @param {?} isEnter * @param {?=} delay * @return {?} */ delayEnterLeave(isOrigin, isEnter, delay = -1) { if (this.delayTimer) { this.clearTogglingTimer(); } else if (delay > 0) { this.delayTimer = setTimeout((/** * @return {?} */ () => { this.delayTimer = undefined; isEnter ? this.show() : this.hide(); }), delay * 1000); } else { // `isOrigin` is used due to the tooltip will not hide immediately // (may caused by the fade-out animation). isEnter && isOrigin ? this.show() : this.hide(); } } /** * @private * @return {?} */ removeTriggerListeners() { this.triggerDisposables.forEach((/** * @param {?} dispose * @return {?} */ dispose => dispose())); this.triggerDisposables.length = 0; } /** * @private * @return {?} */ clearTogglingTimer() { if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = undefined; } } } NzTooltipBaseDirective.propDecorators = { nzTitle: [{ type: Input }], nzContent: [{ type: Input }], nzTrigger: [{ type: Input }], nzPlacement: [{ type: Input }], nzMouseEnterDelay: [{ type: Input }], nzMouseLeaveDelay: [{ type: Input }], nzOverlayClassName: [{ type: Input }], nzOverlayStyle: [{ type: Input }], nzVisible: [{ type: Input }], nzVisibleChange: [{ type: Output }] }; if (false) { /** @type {?} */ NzTooltipBaseDirective.prototype.directiveNameTitle; /** @type {?} */ NzTooltipBaseDirective.prototype.specificTitle; /** @type {?} */ NzTooltipBaseDirective.prototype.directiveNameContent; /** @type {?} */ NzTooltipBaseDirective.prototype.specificContent; /** @type {?} */ NzTooltipBaseDirective.prototype.specificTrigger; /** @type {?} */ NzTooltipBaseDirective.prototype.specificPlacement; /** @type {?} */ NzTooltipBaseDirective.prototype.specificOrigin; /** * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. * Please use a more specific API. Like `nzTooltipTitle`. * @type {?} */ NzTooltipBaseDirective.prototype.nzTitle; /** * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. * Please use a more specific API. Like `nzPopoverContent`. * @type {?} */ NzTooltipBaseDirective.prototype.nzContent; /** * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. * Please use a more specific API. Like `nzTooltipTrigger`. * @type {?} */ NzTooltipBaseDirective.prototype.nzTrigger; /** * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. * Please use a more specific API. Like `nzTooltipPlacement`. * @type {?} */ NzTooltipBaseDirective.prototype.nzPlacement; /** @type {?} */ NzTooltipBaseDirective.prototype.nzMouseEnterDelay; /** @type {?} */ NzTooltipBaseDirective.prototype.nzMouseLeaveDelay; /** @type {?} */ NzTooltipBaseDirective.prototype.nzOverlayClassName; /** @type {?} */ NzTooltipBaseDirective.prototype.nzOverlayStyle; /** @type {?} */ NzTooltipBaseDirective.prototype.nzVisible; /** * For create tooltip dynamically. This should be override for each different component. * @type {?} * @protected */ NzTooltipBaseDirective.prototype.componentFactory; /** * @type {?} * @protected */ NzTooltipBaseDirective.prototype.needProxyProperties; /** @type {?} */ NzTooltipBaseDirective.prototype.nzVisibleChange; /** @type {?} */ NzTooltipBaseDirective.prototype.visible; /** @type {?} */ NzTooltipBaseDirective.prototype.component; /** * @type {?} * @protected */ NzTooltipBaseDirective.prototype.destroy$; /** * @type {?} * @protected */ NzTooltipBaseDirective.prototype.triggerDisposables; /** * @type {?} * @private */ NzTooltipBaseDirective.prototype.delayTimer; /** @type {?} */ NzTooltipBaseDirective.prototype.elementRef; /** * @type {?} * @protected */ NzTooltipBaseDirective.prototype.hostView; /** * @type {?} * @protected */ NzTooltipBaseDirective.prototype.resolver; /** * @type {?} * @protected */ NzTooltipBaseDirective.prototype.renderer; /** * @type {?} * @protected */ NzTooltipBaseDirective.prototype.noAnimation; } /** * @abstract */ class NzTooltipBaseComponent { /** * @param {?} cdr * @param {?=} noAnimation */ constructor(cdr, noAnimation) { this.cdr = cdr; this.noAnimation = noAnimation; this.nzVisibleChange = new Subject(); this.nzOverlayStyle = {}; this._visible = false; this._trigger = 'hover'; this.preferredPlacement = 'top'; this._classMap = {}; this._hasBackdrop = false; this._prefix = 'ant-tooltip-placement'; this._positions = [...DEFAULT_TOOLTIP_POSITIONS]; } /** * @param {?} value * @return {?} */ set nzVisible(value) { /** @type {?} */ const visible = toBoolean(value); if (this._visible !== visible) { this._visible = visible; this.nzVisibleChange.next(visible); } } /** * @return {?} */ get nzVisible() { return this._visible; } /** * @param {?} value * @return {?} */ set nzTrigger(value) { this._trigger = value; this._hasBackdrop = this._trigger === 'click'; } /** * @return {?} */ get nzTrigger() { return this._trigger; } /** * @param {?} value * @return {?} */ set nzPlacement(value) { if (value !== this.preferredPlacement) { this.preferredPlacement = value; this._positions = [POSITION_MAP[this.nzPlacement], ...this._positions]; } } /** * @return {?} */ get nzPlacement() { return this.preferredPlacement; } /** * @return {?} */ ngOnDestroy() { this.nzVisibleChange.complete(); } /** * @return {?} */ show() { if (this.nzVisible) { return; } if (!this.isEmpty()) { this.nzVisible = true; this.nzVisibleChange.next(true); this.cdr.detectChanges(); } } /** * @return {?} */ hide() { if (!this.nzVisible) { return; } this.nzVisible = false; this.nzVisibleChange.next(false); this.cdr.detectChanges(); } /** * @return {?} */ updateByDirective() { this.setClassMap(); this.cdr.detectChanges(); Promise.resolve().then((/** * @return {?} */ () => { this.updatePosition(); this.updateVisibilityByTitle(); })); } /** * Force the component to update its position. * @return {?} */ updatePosition() { if (this.origin && this.overlay && this.overlay.overlayRef) { this.overlay.overlayRef.updatePosition(); } } /** * @param {?} position * @return {?} */ onPositionChange(position) { this.preferredPlacement = (/** @type {?} */ (getPlacementName(position))); this.setClassMap(); this.cdr.detectChanges(); } /** * @return {?} */ setClassMap() { this._classMap = { [this.nzOverlayClassName]: true, [`${this._prefix}-${this.preferredPlacement}`]: true }; } /** * @param {?} origin * @return {?} */ setOverlayOrigin(origin) { this.origin = origin; this.cdr.markForCheck(); } /** * Hide the component while the content is empty. * @private * @return {?} */ updateVisibilityByTitle() { if (this.isEmpty()) { this.hide(); } } } NzTooltipBaseComponent.propDecorators = { overlay: [{ type: ViewChild, args: ['overlay', { static: false },] }] }; if (false) { /** @type {?} */ NzTooltipBaseComponent.prototype.overlay; /** @type {?} */ NzTooltipBaseComponent.prototype.nzVisibleChange; /** @type {?} */ NzTooltipBaseComponent.prototype.nzTitle; /** @type {?} */ NzTooltipBaseComponent.prototype.nzContent; /** @type {?} */ NzTooltipBaseComponent.prototype.nzOverlayClassName; /** @type {?} */ NzTooltipBaseComponent.prototype.nzOverlayStyle; /** @type {?} */ NzTooltipBaseComponent.prototype.nzMouseEnterDelay; /** @type {?} */ NzTooltipBaseComponent.prototype.nzMouseLeaveDelay; /** @type {?} */ NzTooltipBaseComponent.prototype._visible; /** * @type {?} * @protected */ NzTooltipBaseComponent.prototype._trigger; /** @type {?} */ NzTooltipBaseComponent.prototype.origin; /** @type {?} */ NzTooltipBaseComponent.prototype.preferredPlacement; /** @type {?} */ NzTooltipBaseComponent.prototype._classMap; /** @type {?} */ NzTooltipBaseComponent.prototype._hasBackdrop; /** @type {?} */ NzTooltipBaseComponent.prototype._prefix; /** @type {?} */ NzTooltipBaseComponent.prototype._positions; /** @type {?} */ NzTooltipBaseComponent.prototype.cdr; /** @type {?} */ NzTooltipBaseComponent.prototype.noAnimation; /** * Empty component cannot be opened. * @abstract * @protected * @return {?} */ NzTooltipBaseComponent.prototype.isEmpty = function () { }; } /** * @param {?} value * @return {?} */ function isTooltipEmpty(value) { return value instanceof TemplateRef ? false : value === '' || !isNotNil(value); } /** * @fileoverview added by tsickle * Generated from: tooltip.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTooltipDirective extends NzTooltipBaseDirective { /** * @param {?} elementRef * @param {?} hostView * @param {?} resolver * @param {?} renderer * @param {?=} noAnimation */ constructor(elementRef, hostView, resolver, renderer, noAnimation) { super(elementRef, hostView, resolver, renderer, noAnimation); this.componentFactory = this.resolver.resolveComponentFactory(NzToolTipComponent); } } NzTooltipDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-tooltip]', exportAs: 'nzTooltip', host: { '[class.ant-tooltip-open]': 'visible' } },] } ]; /** @nocollapse */ NzTooltipDirective.ctorParameters = () => [ { type: ElementRef }, { type: ViewContainerRef }, { type: ComponentFactoryResolver }, { type: Renderer2 }, { type: NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] } ]; NzTooltipDirective.propDecorators = { specificTitle: [{ type: Input, args: ['nzTooltipTitle',] }], directiveNameTitle: [{ type: Input, args: ['nz-tooltip',] }], specificTrigger: [{ type: Input, args: ['nzTooltipTrigger',] }], specificPlacement: [{ type: Input, args: ['nzTooltipPlacement',] }], specificOrigin: [{ type: Input, args: ['nzTooltipOrigin',] }] }; if (false) { /** @type {?} */ NzTooltipDirective.prototype.specificTitle; /** @type {?} */ NzTooltipDirective.prototype.directiveNameTitle; /** @type {?} */ NzTooltipDirective.prototype.specificTrigger; /** @type {?} */ NzTooltipDirective.prototype.specificPlacement; /** @type {?} */ NzTooltipDirective.prototype.specificOrigin; /** @type {?} */ NzTooltipDirective.prototype.componentFactory; } class NzToolTipComponent extends NzTooltipBaseComponent { /** * @param {?} cdr * @param {?=} noAnimation */ constructor(cdr, noAnimation) { super(cdr, noAnimation); this.noAnimation = noAnimation; } /** * @protected * @return {?} */ isEmpty() { return isTooltipEmpty(this.nzTitle); } } NzToolTipComponent.decorators = [ { type: Component, args: [{ selector: 'nz-tooltip', exportAs: 'nzTooltipComponent', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [zoomBigMotion], template: ` <ng-template #overlay="cdkConnectedOverlay" cdkConnectedOverlay nzConnectedOverlay [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayOpen]="_visible" [cdkConnectedOverlayHasBackdrop]="_hasBackdrop" [cdkConnectedOverlayPositions]="_positions" (backdropClick)="hide()" (detach)="hide()" (positionChange)="onPositionChange($event)" > <div class="ant-tooltip" [ngClass]="_classMap" [ngStyle]="nzOverlayStyle" [@.disabled]="noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" [@zoomBigMotion]="'active'" > <div class="ant-tooltip-content"> <div class="ant-tooltip-arrow"></div> <div class="ant-tooltip-inner"> <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container> </div> </div> </div> </ng-template> `, preserveWhitespaces: false }] } ]; /** @nocollapse */ NzToolTipComponent.ctorParameters = () => [ { type: ChangeDetectorRef }, { type: NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] } ]; NzToolTipComponent.propDecorators = { nzTitle: [{ type: Input }] }; if (false) { /** @type {?} */ NzToolTipComponent.prototype.nzTitle; /** @type {?} */ NzToolTipComponent.prototype.noAnimation; } /** * @fileoverview added by tsickle * Generated from: tooltip.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzToolTipModule { } NzToolTipModule.decorators = [ { type: NgModule, args: [{ declarations: [NzToolTipComponent, NzTooltipDirective], exports: [NzToolTipComponent, NzTooltipDirective], entryComponents: [NzToolTipComponent], imports: [CommonModule, OverlayModule, NzOutletModule, NzOverlayModule, NzNoAnimationModule] },] } ]; /** * @fileoverview added by tsickle * Generated from: public-api.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * Generated from: ng-zorro-antd-tooltip.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzToolTipComponent, NzToolTipModule, NzTooltipBaseComponent, NzTooltipBaseDirective, NzTooltipDirective, isTooltipEmpty }; //# sourceMappingURL=ng-zorro-antd-tooltip.js.map