import * as i0 from '@angular/core'; import { Directive, Input, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import { ZIndexUtils } from 'primeng/utils'; import * as i1 from 'primeng/api'; class Tooltip { constructor(el, zone, config) { this.el = el; this.zone = zone; this.config = config; this.escape = true; this._tooltipOptions = { tooltipPosition: 'right', tooltipEvent: 'hover', appendTo: 'body', tooltipZIndex: 'auto', escape: false, positionTop: 0, positionLeft: 0 }; } get disabled() { return this._disabled; } set disabled(val) { this._disabled = val; this.deactivate(); } ngAfterViewInit() { this.zone.runOutsideAngular(() => { if (this.getOption('tooltipEvent') === 'hover') { this.mouseEnterListener = this.onMouseEnter.bind(this); this.mouseLeaveListener = this.onMouseLeave.bind(this); this.clickListener = this.onClick.bind(this); this.el.nativeElement.addEventListener('mouseenter', this.mouseEnterListener); this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListener); this.el.nativeElement.addEventListener('click', this.clickListener); } else if (this.getOption('tooltipEvent') === 'focus') { this.focusListener = this.onFocus.bind(this); this.blurListener = this.onBlur.bind(this); this.el.nativeElement.addEventListener('focus', this.focusListener); this.el.nativeElement.addEventListener('blur', this.blurListener); } }); } ngOnChanges(simpleChange) { if (simpleChange.tooltipPosition) { this.setOption({ tooltipPosition: simpleChange.tooltipPosition.currentValue }); } if (simpleChange.tooltipEvent) { this.setOption({ tooltipEvent: simpleChange.tooltipEvent.currentValue }); } if (simpleChange.appendTo) { this.setOption({ appendTo: simpleChange.appendTo.currentValue }); } if (simpleChange.positionStyle) { this.setOption({ positionStyle: simpleChange.positionStyle.currentValue }); } if (simpleChange.tooltipStyleClass) { this.setOption({ tooltipStyleClass: simpleChange.tooltipStyleClass.currentValue }); } if (simpleChange.tooltipZIndex) { this.setOption({ tooltipZIndex: simpleChange.tooltipZIndex.currentValue }); } if (simpleChange.escape) { this.setOption({ escape: simpleChange.escape.currentValue }); } if (simpleChange.showDelay) { this.setOption({ showDelay: simpleChange.showDelay.currentValue }); } if (simpleChange.hideDelay) { this.setOption({ hideDelay: simpleChange.hideDelay.currentValue }); } if (simpleChange.life) { this.setOption({ life: simpleChange.life.currentValue }); } if (simpleChange.positionTop) { this.setOption({ positionTop: simpleChange.positionTop.currentValue }); } if (simpleChange.positionLeft) { this.setOption({ positionLeft: simpleChange.positionLeft.currentValue }); } if (simpleChange.disabled) { this.setOption({ disabled: simpleChange.disabled.currentValue }); } if (simpleChange.text) { this.setOption({ tooltipLabel: simpleChange.text.currentValue }); if (this.active) { if (simpleChange.text.currentValue) { if (this.container && this.container.offsetParent) { this.updateText(); this.align(); } else { this.show(); } } else { this.hide(); } } } if (simpleChange.tooltipOptions) { this._tooltipOptions = Object.assign(Object.assign({}, this._tooltipOptions), simpleChange.tooltipOptions.currentValue); this.deactivate(); if (this.active) { if (this.getOption('tooltipLabel')) { if (this.container && this.container.offsetParent) { this.updateText(); this.align(); } else { this.show(); } } else { this.hide(); } } } } onMouseEnter(e) { if (!this.container && !this.showTimeout) { this.activate(); } } onMouseLeave(e) { this.deactivate(); } onFocus(e) { this.activate(); } onBlur(e) { this.deactivate(); } onClick(e) { this.deactivate(); } activate() { this.active = true; this.clearHideTimeout(); if (this.getOption('showDelay')) this.showTimeout = setTimeout(() => { this.show(); }, this.getOption('showDelay')); else this.show(); if (this.getOption('life')) { let duration = this.getOption('showDelay') ? this.getOption('life') + this.getOption('showDelay') : this.getOption('life'); this.hideTimeout = setTimeout(() => { this.hide(); }, duration); } } deactivate() { this.active = false; this.clearShowTimeout(); if (this.getOption('hideDelay')) { this.clearHideTimeout(); //life timeout this.hideTimeout = setTimeout(() => { this.hide(); }, this.getOption('hideDelay')); } else { this.hide(); } } create() { if (this.container) { this.clearHideTimeout(); this.remove(); } this.container = document.createElement('div'); let tooltipArrow = document.createElement('div'); tooltipArrow.className = 'p-tooltip-arrow'; this.container.appendChild(tooltipArrow); this.tooltipText = document.createElement('div'); this.tooltipText.className = 'p-tooltip-text'; this.updateText(); if (this.getOption('positionStyle')) { this.container.style.position = this.getOption('positionStyle'); } this.container.appendChild(this.tooltipText); if (this.getOption('appendTo') === 'body') document.body.appendChild(this.container); else if (this.getOption('appendTo') === 'target') DomHandler.appendChild(this.container, this.el.nativeElement); else DomHandler.appendChild(this.container, this.getOption('appendTo')); this.container.style.display = 'inline-block'; } show() { if (!this.getOption('tooltipLabel') || this.getOption('disabled')) { return; } this.create(); this.align(); DomHandler.fadeIn(this.container, 250); if (this.getOption('tooltipZIndex') === 'auto') ZIndexUtils.set('tooltip', this.container, this.config.zIndex.tooltip); else this.container.style.zIndex = this.getOption('tooltipZIndex'); this.bindDocumentResizeListener(); this.bindScrollListener(); } hide() { if (this.getOption('tooltipZIndex') === 'auto') { ZIndexUtils.clear(this.container); } this.remove(); } updateText() { if (this.getOption('escape')) { this.tooltipText.innerHTML = ''; this.tooltipText.appendChild(document.createTextNode(this.getOption('tooltipLabel'))); } else { this.tooltipText.innerHTML = this.getOption('tooltipLabel'); } } align() { let position = this.getOption('tooltipPosition'); switch (position) { case 'top': this.alignTop(); if (this.isOutOfBounds()) { this.alignBottom(); if (this.isOutOfBounds()) { this.alignRight(); if (this.isOutOfBounds()) { this.alignLeft(); } } } break; case 'bottom': this.alignBottom(); if (this.isOutOfBounds()) { this.alignTop(); if (this.isOutOfBounds()) { this.alignRight(); if (this.isOutOfBounds()) { this.alignLeft(); } } } break; case 'left': this.alignLeft(); if (this.isOutOfBounds()) { this.alignRight(); if (this.isOutOfBounds()) { this.alignTop(); if (this.isOutOfBounds()) { this.alignBottom(); } } } break; case 'right': this.alignRight(); if (this.isOutOfBounds()) { this.alignLeft(); if (this.isOutOfBounds()) { this.alignTop(); if (this.isOutOfBounds()) { this.alignBottom(); } } } break; } } getHostOffset() { if (this.getOption('appendTo') === 'body' || this.getOption('appendTo') === 'target') { let offset = this.el.nativeElement.getBoundingClientRect(); let targetLeft = offset.left + DomHandler.getWindowScrollLeft(); let targetTop = offset.top + DomHandler.getWindowScrollTop(); return { left: targetLeft, top: targetTop }; } else { return { left: 0, top: 0 }; } } alignRight() { this.preAlign('right'); let hostOffset = this.getHostOffset(); let left = hostOffset.left + DomHandler.getOuterWidth(this.el.nativeElement); let top = hostOffset.top + (DomHandler.getOuterHeight(this.el.nativeElement) - DomHandler.getOuterHeight(this.container)) / 2; this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } alignLeft() { this.preAlign('left'); let hostOffset = this.getHostOffset(); let left = hostOffset.left - DomHandler.getOuterWidth(this.container); let top = hostOffset.top + (DomHandler.getOuterHeight(this.el.nativeElement) - DomHandler.getOuterHeight(this.container)) / 2; this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } alignTop() { this.preAlign('top'); let hostOffset = this.getHostOffset(); let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2; let top = hostOffset.top - DomHandler.getOuterHeight(this.container); this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } alignBottom() { this.preAlign('bottom'); let hostOffset = this.getHostOffset(); let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2; let top = hostOffset.top + DomHandler.getOuterHeight(this.el.nativeElement); this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } setOption(option) { this._tooltipOptions = Object.assign(Object.assign({}, this._tooltipOptions), option); } getOption(option) { return this._tooltipOptions[option]; } preAlign(position) { this.container.style.left = -999 + 'px'; this.container.style.top = -999 + 'px'; let defaultClassName = 'p-tooltip p-component p-tooltip-' + position; this.container.className = this.getOption('tooltipStyleClass') ? defaultClassName + ' ' + this.getOption('tooltipStyleClass') : defaultClassName; } isOutOfBounds() { let offset = this.container.getBoundingClientRect(); let targetTop = offset.top; let targetLeft = offset.left; let width = DomHandler.getOuterWidth(this.container); let height = DomHandler.getOuterHeight(this.container); let viewport = DomHandler.getViewport(); return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height); } onWindowResize(e) { this.hide(); } bindDocumentResizeListener() { this.zone.runOutsideAngular(() => { this.resizeListener = this.onWindowResize.bind(this); window.addEventListener('resize', this.resizeListener); }); } unbindDocumentResizeListener() { if (this.resizeListener) { window.removeEventListener('resize', this.resizeListener); this.resizeListener = null; } } bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => { if (this.container) { this.hide(); } }); } this.scrollHandler.bindScrollListener(); } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } unbindEvents() { if (this.getOption('tooltipEvent') === 'hover') { this.el.nativeElement.removeEventListener('mouseenter', this.mouseEnterListener); this.el.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListener); this.el.nativeElement.removeEventListener('click', this.clickListener); } else if (this.getOption('tooltipEvent') === 'focus') { this.el.nativeElement.removeEventListener('focus', this.focusListener); this.el.nativeElement.removeEventListener('blur', this.blurListener); } this.unbindDocumentResizeListener(); } remove() { if (this.container && this.container.parentElement) { if (this.getOption('appendTo') === 'body') document.body.removeChild(this.container); else if (this.getOption('appendTo') === 'target') this.el.nativeElement.removeChild(this.container); else DomHandler.removeChild(this.container, this.getOption('appendTo')); } this.unbindDocumentResizeListener(); this.unbindScrollListener(); this.clearTimeouts(); this.container = null; this.scrollHandler = null; } clearShowTimeout() { if (this.showTimeout) { clearTimeout(this.showTimeout); this.showTimeout = null; } } clearHideTimeout() { if (this.hideTimeout) { clearTimeout(this.hideTimeout); this.hideTimeout = null; } } clearTimeouts() { this.clearShowTimeout(); this.clearHideTimeout(); } ngOnDestroy() { this.unbindEvents(); if (this.container) { ZIndexUtils.clear(this.container); } this.remove(); if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } } } Tooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Tooltip, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Directive }); Tooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: Tooltip, selector: "[pTooltip]", inputs: { tooltipPosition: "tooltipPosition", tooltipEvent: "tooltipEvent", appendTo: "appendTo", positionStyle: "positionStyle", tooltipStyleClass: "tooltipStyleClass", tooltipZIndex: "tooltipZIndex", escape: "escape", showDelay: "showDelay", hideDelay: "hideDelay", life: "life", positionTop: "positionTop", positionLeft: "positionLeft", text: ["pTooltip", "text"], disabled: ["tooltipDisabled", "disabled"], tooltipOptions: "tooltipOptions" }, host: { classAttribute: "p-element" }, usesOnChanges: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Tooltip, decorators: [{ type: Directive, args: [{ selector: '[pTooltip]', host: { 'class': 'p-element' } }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PrimeNGConfig }]; }, propDecorators: { tooltipPosition: [{ type: Input }], tooltipEvent: [{ type: Input }], appendTo: [{ type: Input }], positionStyle: [{ type: Input }], tooltipStyleClass: [{ type: Input }], tooltipZIndex: [{ type: Input }], escape: [{ type: Input }], showDelay: [{ type: Input }], hideDelay: [{ type: Input }], life: [{ type: Input }], positionTop: [{ type: Input }], positionLeft: [{ type: Input }], text: [{ type: Input, args: ['pTooltip'] }], disabled: [{ type: Input, args: ["tooltipDisabled"] }], tooltipOptions: [{ type: Input }] } }); class TooltipModule { } TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, declarations: [Tooltip], imports: [CommonModule], exports: [Tooltip] }); TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, imports: [[CommonModule]] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule], exports: [Tooltip], declarations: [Tooltip] }] }] }); /** * Generated bundle index. Do not edit. */ export { Tooltip, TooltipModule };