@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
403 lines (396 loc) • 16.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ng-devui/position'), require('rxjs'), require('ng-devui/utils'), require('ng-devui/portal'), require('ng-devui/overlay-container'), require('ng-devui/window-ref')) :
typeof define === 'function' && define.amd ? define('ng-devui/tooltip', ['exports', '@angular/core', '@angular/common', 'ng-devui/position', 'rxjs', 'ng-devui/utils', 'ng-devui/portal', 'ng-devui/overlay-container', 'ng-devui/window-ref'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].tooltip = {}), global.ng.core, global.ng.common, global['ng-devui'].position, global.rxjs, global['ng-devui'].utils, global['ng-devui'].portal, global['ng-devui']['overlay-container'], global['ng-devui']['window-ref']));
}(this, (function (exports, core, common, position, rxjs, utils, portal, overlayContainer, windowRef) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: tooltip.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TooltipComponent = /** @class */ (function () {
function TooltipComponent(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';
}
Object.defineProperty(TooltipComponent.prototype, "class", {
get: /**
* @return {?}
*/
function () {
return 'devui-tooltip ' + this.position;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipComponent.prototype, "state", {
get: /**
* @return {?}
*/
function () {
return this.animateState;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TooltipComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.updatePosition();
this.scrollElement = this.positionService.getScrollParent(this.triggerElementRef.nativeElement);
this._onScroll = rxjs.fromEvent((this.scrollElement || window), 'scroll')
.subscribe((/**
* @return {?}
*/
function () {
_this.updatePosition();
}));
};
/**
* @return {?}
*/
TooltipComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._onScroll) {
this._onScroll.unsubscribe();
}
};
/**
* @return {?}
*/
TooltipComponent.prototype.onShow = /**
* @return {?}
*/
function () {
this.animateState = this.position;
};
/**
* @return {?}
*/
TooltipComponent.prototype.onHide = /**
* @return {?}
*/
function () {
this.animateState = 'void';
};
// will be overwrite by tooltip directive
// will be overwrite by tooltip directive
/**
* @return {?}
*/
TooltipComponent.prototype.onHidden =
// will be overwrite by tooltip directive
/**
* @return {?}
*/
function () {
};
/**
* @param {?} event
* @return {?}
*/
TooltipComponent.prototype.onAnimationEnd = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.toState === 'void') {
this.onHidden();
}
};
/**
* @return {?}
*/
TooltipComponent.prototype.updatePosition = /**
* @return {?}
*/
function () {
// 解决tooltip自身大小导致出现滚动条，影响位置计算
this.renderer2.setStyle(this.tooltip.nativeElement, 'visibility', 'hidden');
this.renderer2.setStyle(this.tooltip.nativeElement, 'transform', 'translate(0, -99999px)');
/** @type {?} */
var 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: core.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: [
utils.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 = function () { return [
{ type: position.PositionService },
{ type: core.ElementRef },
{ type: core.Renderer2 }
]; };
TooltipComponent.propDecorators = {
content: [{ type: core.Input }],
position: [{ type: core.Input }],
triggerElementRef: [{ type: core.Input }],
showAnimate: [{ type: core.Input }],
display: [{ type: core.HostBinding, args: ['style.display',] }],
class: [{ type: core.HostBinding, args: ['class',] }],
state: [{ type: core.HostBinding, args: ['@directionFadeInOut',] }],
onAnimationEnd: [{ type: core.HostListener, args: ['@directionFadeInOut.done', ['$event'],] }]
};
return TooltipComponent;
}());
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;
}
/**
* @fileoverview added by tsickle
* Generated from: tooltip.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TooltipDirective = /** @class */ (function () {
function TooltipDirective(triggerElementRef, overlayContainerRef, componentFactoryResolver) {
this.triggerElementRef = triggerElementRef;
this.overlayContainerRef = overlayContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.position = 'bottom';
}
/**
* @return {?}
*/
TooltipDirective.prototype.onMouseEnter = /**
* @return {?}
*/
function () {
this.show();
};
/**
* @return {?}
*/
TooltipDirective.prototype.onMouseLeave = /**
* @return {?}
*/
function () {
this.hide();
};
/**
* @return {?}
*/
TooltipDirective.prototype.onFocus = /**
* @return {?}
*/
function () {
this.show();
};
/**
* @return {?}
*/
TooltipDirective.prototype.onBlur = /**
* @return {?}
*/
function () {
this.hide();
};
/**
* @return {?}
*/
TooltipDirective.prototype.createTooltip = /**
* @return {?}
*/
function () {
this.tooltipComponentRef = this.overlayContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(TooltipComponent));
Object.assign(this.tooltipComponentRef.instance, {
content: this.content,
position: this.position,
showAnimate: this.showAnimate,
triggerElementRef: this.triggerElementRef,
});
};
/**
* @return {?}
*/
TooltipDirective.prototype.show = /**
* @return {?}
*/
function () {
if (!this.content) {
return;
}
if (this.tooltipComponentRef) {
this.destroy();
}
this.createTooltip();
if (this.showAnimate) {
this.tooltipComponentRef.instance.onShow();
}
};
/**
* @return {?}
*/
TooltipDirective.prototype.destroy = /**
* @return {?}
*/
function () {
if (this.tooltipComponentRef) {
this.tooltipComponentRef.destroy();
this.tooltipComponentRef = null;
}
};
/**
* @return {?}
*/
TooltipDirective.prototype.hide = /**
* @return {?}
*/
function () {
var _this = this;
if (this.tooltipComponentRef) {
this.tooltipComponentRef.instance.onHide();
if (!this.showAnimate) {
this.destroy();
return;
}
this.tooltipComponentRef.instance.onHidden = (/**
* @return {?}
*/
function () {
_this.destroy();
});
}
};
/**
* @return {?}
*/
TooltipDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy();
};
TooltipDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[dTooltip]',
exportAs: 'dTooltip',
},] }
];
/** @nocollapse */
TooltipDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: overlayContainer.OverlayContainerRef },
{ type: core.ComponentFactoryResolver }
]; };
TooltipDirective.propDecorators = {
content: [{ type: core.Input }],
position: [{ type: core.Input }],
showAnimate: [{ type: core.Input }],
onMouseEnter: [{ type: core.HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: core.HostListener, args: ['mouseleave',] }],
onFocus: [{ type: core.HostListener, args: ['focus',] }],
onBlur: [{ type: core.HostListener, args: ['blur',] }]
};
return TooltipDirective;
}());
if (false) {
/** @type {?} */
TooltipDirective.prototype.content;
/** @type {?} */
TooltipDirective.prototype.position;
/** @type {?} */
TooltipDirective.prototype.showAnimate;
/** @type {?} */
TooltipDirective.prototype.tooltipComponentRef;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.triggerElementRef;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.overlayContainerRef;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* Generated from: tooltip.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TooltipModule = /** @class */ (function () {
function TooltipModule() {
}
TooltipModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
portal.PortalModule,
position.PositioningModule
],
exports: [TooltipComponent, TooltipDirective],
declarations: [TooltipComponent, TooltipDirective],
providers: [
windowRef.WindowRef,
windowRef.DocumentRef,
overlayContainer.OverlayContainerRef,
],
entryComponents: [TooltipComponent]
},] }
];
return TooltipModule;
}());
exports.TooltipComponent = TooltipComponent;
exports.TooltipDirective = TooltipDirective;
exports.TooltipModule = TooltipModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-tooltip.umd.js.map