@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
161 lines • 14.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: tooltip.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
import { PositionService } from '@duoduo-oba/ng-devui/position';
import { fromEvent } from 'rxjs';
import { directionFadeInOut } from '@duoduo-oba/ng-devui/utils';
export class TooltipComponent {
/**
* @param {?} positionService
* @param {?} tooltip
* @param {?} renderer2
*/
constructor(positionService, tooltip, renderer2) {
this.positionService = positionService;
this.tooltip = tooltip;
this.renderer2 = renderer2;
this.position = 'bottom';
this.showAnimate = false;
this.animateState = this.showAnimate ? 'void' : 'visible';
this.display = 'block';
}
/**
* @return {?}
*/
get class() {
return 'devui-tooltip ' + this.position;
}
/**
* @return {?}
*/
get state() {
return this.animateState;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.updatePosition();
this.scrollElement = this.positionService.getScrollParent(this.triggerElementRef.nativeElement);
this._onScroll = fromEvent((this.scrollElement || window), 'scroll')
.subscribe((/**
* @return {?}
*/
() => {
this.updatePosition();
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._onScroll) {
this._onScroll.unsubscribe();
}
}
/**
* @return {?}
*/
onShow() {
this.animateState = this.position;
}
/**
* @return {?}
*/
onHide() {
this.animateState = 'void';
}
// will be overwrite by tooltip directive
/**
* @return {?}
*/
onHidden() {
}
/**
* @param {?} event
* @return {?}
*/
onAnimationEnd(event) {
if (event.toState === 'void') {
this.onHidden();
}
}
/**
* @return {?}
*/
updatePosition() {
// 解决tooltip自身大小导致出现滚动条，影响位置计算
this.renderer2.setStyle(this.tooltip.nativeElement, 'visibility', 'hidden');
this.renderer2.setStyle(this.tooltip.nativeElement, 'transform', 'translate(0, -99999px)');
/** @type {?} */
const rect = this.positionService.positionElements(this.triggerElementRef.nativeElement, this.tooltip.nativeElement, this.position, true);
this.renderer2.setStyle(this.tooltip.nativeElement, 'left', `${rect.left}px`);
this.renderer2.setStyle(this.tooltip.nativeElement, 'top', `${rect.top}px`);
// 移除样式
this.renderer2.setStyle(this.tooltip.nativeElement, 'visibility', null);
this.renderer2.setStyle(this.tooltip.nativeElement, 'transform', null);
}
}
TooltipComponent.decorators = [
{ type: Component, args: [{
selector: 'd-tooltip',
template: "<div class=\"devui-tooltip-arrow\"></div>\r\n<div class=\"devui-tooltip-inner\" [innerHTML]=\"content\"></div>\r\n",
animations: [
directionFadeInOut
],
styles: [":host-context(.devui-tooltip){position:absolute;z-index:1070;display:block;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;opacity:1}:host-context(.devui-tooltip).top{margin-top:-5px;padding:0;box-shadow:-5px 5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).top .devui-tooltip-arrow{bottom:-5px;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#464d6e}:host-context(.devui-tooltip).bottom{margin-top:5px;padding:0;box-shadow:5px -5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).bottom .devui-tooltip-arrow{top:-5px;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#464d6e}:host-context(.devui-tooltip).left{margin-left:-5px;padding:0;box-shadow:5px -5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).left .devui-tooltip-arrow{top:50%;right:-5px;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#464d6e}:host-context(.devui-tooltip).right{margin-left:5px;padding:0;box-shadow:-5px 5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).right .devui-tooltip-arrow{top:50%;left:-5px;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#464d6e}:host-context(.devui-tooltip) .devui-tooltip-inner{max-width:200px;padding:5px 10px;font-size:14px;color:#dfe1e6;letter-spacing:0;line-height:20px;background:#464d6e;box-shadow:none;overflow-wrap:break-word;text-align:start}:host-context(.devui-tooltip) .devui-tooltip-arrow{display:block;position:absolute;width:0;height:0;border-color:transparent;border-style:solid}"]
}] }
];
/** @nocollapse */
TooltipComponent.ctorParameters = () => [
{ type: PositionService },
{ type: ElementRef },
{ type: Renderer2 }
];
TooltipComponent.propDecorators = {
content: [{ type: Input }],
position: [{ type: Input }],
triggerElementRef: [{ type: Input }],
showAnimate: [{ type: Input }],
display: [{ type: HostBinding, args: ['style.display',] }],
class: [{ type: HostBinding, args: ['class',] }],
state: [{ type: HostBinding, args: ['@directionFadeInOut',] }],
onAnimationEnd: [{ type: HostListener, args: ['@directionFadeInOut.done', ['$event'],] }]
};
if (false) {
/** @type {?} */
TooltipComponent.prototype.content;
/** @type {?} */
TooltipComponent.prototype.position;
/** @type {?} */
TooltipComponent.prototype.triggerElementRef;
/** @type {?} */
TooltipComponent.prototype.showAnimate;
/** @type {?} */
TooltipComponent.prototype.scrollElement;
/** @type {?} */
TooltipComponent.prototype.animateState;
/** @type {?} */
TooltipComponent.prototype.display;
/** @type {?} */
TooltipComponent.prototype._onScroll;
/**
* @type {?}
* @private
*/
TooltipComponent.prototype.positionService;
/**
* @type {?}
* @private
*/
TooltipComponent.prototype.tooltip;
/**
* @type {?}
* @private
*/
TooltipComponent.prototype.renderer2;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy1kZXZ1aS90b29sdGlwLyIsInNvdXJjZXMiOlsidG9vbHRpcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdILE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNwRCxPQUFPLEVBQUUsU0FBUyxFQUFnQixNQUFNLE1BQU0sQ0FBQztBQUMvQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQVlwRCxNQUFNLE9BQU8sZ0JBQWdCOzs7Ozs7SUFvQjNCLFlBQ1UsZUFBZ0MsRUFDaEMsT0FBbUIsRUFDbkIsU0FBb0I7UUFGcEIsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ2hDLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFDbkIsY0FBUyxHQUFULFNBQVMsQ0FBVztRQXJCckIsYUFBUSxHQUFpQixRQUFRLENBQUM7UUFFbEMsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFFN0IsaUJBQVksR0FBVyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQztRQUUvQixZQUFPLEdBQUcsT0FBTyxDQUFDO0lBaUJoRCxDQUFDOzs7O0lBaEJELElBQTBCLEtBQUs7UUFDN0IsT0FBTyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQzFDLENBQUM7Ozs7SUFFRCxJQUF3QyxLQUFLO1FBQzNDLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDOzs7O0lBWUQsZUFBZTtRQUNiLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxl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eEMsbUNBQTJCOzs7OztJQUMzQixxQ0FBNEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkRlc3Ryb3ksIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBQb3NpdGlvblNlcnZpY2UgfSBmcm9tICduZy1kZXZ1aS9wb3NpdGlvbic7XHJcbmltcG9ydCB7IGZyb21FdmVudCwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IGRpcmVjdGlvbkZhZGVJbk91dCB9IGZyb20gJ25nLWRldnVpL3V0aWxzJztcclxuaW1wb3J0IHsgUG9zaXRpb25UeXBlIH0gZnJvbSAnLi90b29sdGlwLnR5cGVzJztcclxuXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2QtdG9vbHRpcCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3Rvb2x0aXAuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3Rvb2x0aXAuY29tcG9uZW50LnNjc3MnXSxcclxuICBhbmltYXRpb25zOiBbXHJcbiAgICBkaXJlY3Rpb25GYWRlSW5PdXRcclxuICBdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgVG9vbHRpcENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XHJcbiAgQElucHV0KCkgY29udGVudDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHBvc2l0aW9uOiBQb3NpdGlvblR5cGUgPSAnYm90dG9tJztcclxuICBASW5wdXQoKSB0cmlnZ2VyRWxlbWVudFJlZjogRWxlbWVudFJlZjtcclxuICBASW5wdXQoKSBzaG93QW5pbWF0ZSA9IGZhbHNlO1xyXG4gIHNjcm9sbEVsZW1lbnQ6IEVsZW1lbnQ7XHJcbiAgYW5pbWF0ZVN0YXRlOiBzdHJpbmcgPSB0aGlzLnNob3dBbmltYXRlID8gJ3ZvaWQnIDogJ3Zpc2libGUnO1xyXG5cclxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmRpc3BsYXknKSBkaXNwbGF5ID0gJ2Jsb2NrJztcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgZ2V0IGNsYXNzKCkge1xyXG4gICAgcmV0dXJuICdkZXZ1aS10b29sdGlwICcgKyB0aGlzLnBvc2l0aW9uO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdAZGlyZWN0aW9uRmFkZUluT3V0JykgZ2V0IHN0YXRlKCkge1xyXG4gICAgcmV0dXJuIHRoaXMuYW5pbWF0ZVN0YXRlO1xyXG4gIH1cclxuXHJcblxyXG4gIF9vblNjcm9sbDogU3Vic2NyaXB0aW9uO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgcG9zaXRpb25TZXJ2aWNlOiBQb3NpdGlvblNlcnZpY2UsXHJcbiAgICBwcml2YXRlIHRvb2x0aXA6IEVsZW1lbnRSZWYsXHJcbiAgICBwcml2YXRlIHJlbmRlcmVyMjogUmVuZGVyZXIyXHJcbiAgKSB7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICB0aGlzLnVwZGF0ZVBvc2l0aW9uKCk7XHJcbiAgICB0aGlzLnNjcm9sbEVsZW1lbnQgPSB0aGlzLnBvc2l0aW9uU2VydmljZS5nZXRTY3JvbGxQYXJlbnQodGhpcy50cmlnZ2VyRWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcclxuICAgIHRoaXMuX29uU2Nyb2xsID0gZnJvbUV2ZW50KCh0aGlzLnNjcm9sbEVsZW1lbnQgfHwgd2luZG93KSwgJ3Njcm9sbCcpXHJcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICAgIHRoaXMudXBkYXRlUG9zaXRpb24oKTtcclxuICAgICAgfSk7XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpIHtcclxuICAgIGlmICh0aGlzLl9vblNjcm9sbCkge1xyXG4gICAgICB0aGlzLl9vblNjcm9sbC51bnN1YnNjcmliZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgb25TaG93KCkge1xyXG4gICAgdGhpcy5hbmltYXRlU3RhdGUgPSB0aGlzLnBvc2l0aW9uIDtcclxuICB9XHJcblxyXG4gIG9uSGlkZSgpIHtcclxuICAgIHRoaXMuYW5pbWF0ZVN0YXRlID0gJ3ZvaWQnO1xyXG4gIH1cclxuXHJcbiAgLy8gd2lsbCBiZSBvdmVyd3JpdGUgYnkgdG9vbHRpcCBkaXJlY3RpdmVcclxuICBvbkhpZGRlbigpIHtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ0BkaXJlY3Rpb25GYWRlSW5PdXQuZG9uZScsIFsnJGV2ZW50J10pXHJcbiAgb25BbmltYXRpb25FbmQoZXZlbnQpIHtcclxuICAgIGlmIChldmVudC50b1N0YXRlID09PSAndm9pZCcpIHtcclxuICAgICAgdGhpcy5vbkhpZGRlbigpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcblxyXG4gIHVwZGF0ZVBvc2l0aW9uKCkge1xyXG4gICAgLy8g6Kej5YazdG9vbHRpcOiHqui6q+Wkp+Wwj+WvvOiHtOWHuueOsOa7muWKqOadoe+8jOW9seWTjeS9jee9ruiuoeeul1xyXG4gICAgdGhpcy5yZW5kZXJlcjIuc2V0U3R5bGUodGhpcy50b29sdGlwLm5hdGl2ZUVsZW1lbnQsICd2aXNpYmlsaXR5JywgJ2hpZGRlbicpO1xyXG4gICAgdGhpcy5yZW5kZXJlcjIuc2V0U3R5bGUodGhpcy50b29sdGlwLm5hdGl2ZUVsZW1lbnQsICd0cmFuc2Zvcm0nLCAndHJhbnNsYXRlKDAsIC05OTk5OXB4KScpO1xyXG4gICAgY29uc3QgcmVjdCA9IHRoaXMucG9zaXRpb25TZXJ2aWNlLnBvc2l0aW9uRWxlbWVudHModGhpcy50cmlnZ2VyRWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LFxyXG4gICAgICB0aGlzLnRvb2x0aXAubmF0aXZlRWxlbWVudCwgdGhpcy5wb3NpdGlvbiwgdHJ1ZSk7XHJcbiAgICB0aGlzLnJlbmRlcmVyMi5zZXRTdHlsZSh0aGlzLnRvb2x0aXAubmF0aXZlRWxlbWVudCwgJ2xlZnQnLCBgJHtyZWN0LmxlZnR9cHhgKTtcclxuICAgIHRoaXMucmVuZGVyZXIyLnNldFN0eWxlKHRoaXMudG9vbHRpcC5uYXRpdmVFbGVtZW50LCAndG9wJywgYCR7cmVjdC50b3B9cHhgKTtcclxuICAgIC8vIOenu+mZpOagt+W8j1xyXG4gICAgdGhpcy5yZW5kZXJlcjIuc2V0U3R5bGUodGhpcy50b29sdGlwLm5hdGl2ZUVsZW1lbnQsICd2aXNpYmlsaXR5JywgbnVsbCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyMi5zZXRTdHlsZSh0aGlzLnRvb2x0aXAubmF0aXZlRWxlbWVudCwgJ3RyYW5zZm9ybScsIG51bGwpO1xyXG4gIH1cclxufVxyXG5cclxuIl19